ボタンのテキストをドロップダウンでクリックすると変更されますか？

Question

私はドロップダウンボタンを持っています、ウェブページに入るとき、ボタンは "Select Region"と言います。そのボタンの上にマウスを置くと、異なる領域が得られます。

ボタンの主な値は、必要な領域をクリックすると変更する必要があります。

また、ボタンを右側の検索バー内に表示したいのですが、例のように、ボタンを常に下に配置しています。私はさまざまなオプションを試しましたが、これを修正することはできません。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; 
 
    vertical-align: baseline; 
 
    outline: none; 
 
} 
 

 
body { 
 
    background: url(../images/background/body_background.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo img{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 

 
.SearchSummoners { 
 
    margin: auto; 
 
    width: 35%; 
 
    padding: 10px; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    border: 1px solid; 
 

 
    -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%); 
 
    border-image: linear-gradient(to bottom, #006184 0%, #303142 100%); 
 
    border-image-slice: 1; 
 
} 
 

 
/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.region_dropdown_section { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.region_dropdown_content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.region_dropdown_content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.region_dropdown_content a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.region_dropdown_section:hover .region_dropdown_content { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.region_dropdown_section:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.Searchbox_Summoners { 
 
    margin: auto; 
 
    display: block; 
 
    width: 65%; 
 
} 
 

 
#SearchBox{ 
 
\t \t margin-right: 10%; 
 
\t \t margin-left: 10%; 
 
\t \t width: 80%; 
 
\t \t background-color: white; 
 
\t \t height: 40px;; 
 
\t } 
 

 
#SearchInput{ 
 
\t \t width: 70%; 
 
\t \t line-height: 40px; 
 
\t \t background: white; 
 
\t \t border: 0; 
 
\t \t outline: 0; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t margin-left: 20px; 
 
    font-size: 24px; 
 
\t }

<?php define('DeniedAccessFiles', TRUE); ?> 
 

 
<?php include 'header.php'; ?> 
 
<div class="logo"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225"> 
 
</div> 
 
    <div class="SearchSummoners"> 
 
    <div id="SearchBox"> 
 
     <form method="POST"> 
 
     <input id="SearchInput" value="Enter the Summoner Name" onfocus="if(this.value == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }" type="text" name="SummonerName"></input> 
 
     </form> 
 
    </div> 
 
    <div class="region_dropdown_section"> 
 
     <button class="dropbtn">Select Region</button> 
 
     <div class="region_dropdown_content"> 
 
     <a href="#">North America</a> 
 
     <a href="#">Europe West</a> 
 
     <a href="#">Europe NE</a> 
 
     <a href="#">Korea</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
<?php include 'footer.php'; ?>

Answer 1

トリガーとonclickの変更ボタンのテキストをクリックしてください...

UPDATEリンクに追加：固定空のボタンテキスト

$(document).ready(function(){ 
 
    var regionDropDown = $('.region_dropdown_section'), 
 
     regionButton = regionDropDown.find('button'), 
 
     regionList = regionDropDown.find('.region_dropdown_content').children(); 
 
    
 
    $(regionList).on('click', function(e){ 
 
    var region = e.target; 
 
    regionButton.text(region.text).val(region.text); 
 
    }); 
 
});

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; 
 
    vertical-align: baseline; 
 
    outline: none; 
 
} 
 

 
body { 
 
    background: url(../images/background/body_background.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo img{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 

 
.SearchSummoners { 
 
    margin: auto; 
 
    width: 55%; 
 
    padding: 10px; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    border: 1px solid; 
 

 
    -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%); 
 
    border-image: linear-gradient(to bottom, #006184 0%, #303142 100%); 
 
    border-image-slice: 1; 
 
} 
 

 
/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.region_dropdown_section { 
 
    display: inline-block; 
 
    width: calc(20% - 10px); 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.region_dropdown_content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.region_dropdown_content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.region_dropdown_content a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.region_dropdown_section:hover .region_dropdown_content { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.region_dropdown_section:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.Searchbox_Summoners { 
 
    margin: auto; 
 
    display: block; 
 
    width: 65%; 
 
} 
 

 
#SearchBox{ 
 
    display: inline-block; 
 
\t \t margin-right: 10%; 
 
\t \t margin-left: 10%; 
 
\t \t width: 50%; 
 
\t \t background-color: white; 
 
\t \t height: 40px;; 
 
\t } 
 

 
#SearchInput{ 
 
\t \t width: 70%; 
 
\t \t line-height: 40px; 
 
\t \t background: white; 
 
\t \t border: 0; 
 
\t \t outline: 0; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t margin-left: 20px; 
 
    font-size: 24px; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<?php define('DeniedAccessFiles', TRUE); ?> 
 

 
<?php include 'header.php'; ?> 
 
<div class="logo"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225"> 
 
</div> 
 
    <div class="SearchSummoners"> 
 
    <div id="SearchBox"> 
 
     <form method="POST"> 
 
     <input id="SearchInput" value="Enter the Summoner Name" onfocus="if(this.value == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }" type="text" name="SummonerName"></input> 
 
     </form> 
 
    </div> 
 
    <div class="region_dropdown_section"> 
 
     <button class="dropbtn">Select Region</button> 
 
     <div class="region_dropdown_content"> 
 
     <a href="#">North America</a> 
 
     <a href="#">Europe West</a> 
 
     <a href="#">Europe NE</a> 
 
     <a href="#">Korea</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
<?php include 'footer.php'; ?>

Answer 2

ソリューションは次のようになります。

各アンカーのクラスregion_dropdown_contentとdivの下のクリックイベントハンドラを接続します。このハンドラの内部では、ユーザの選択に従ってフィールドの値を変更します。

解決策は、jQueryとjavascriptで実装できます。

スニペット：

$(function() { 
 
    $('div.region_dropdown_content a').on('click', function(e) { 
 
    //$('#SearchInput').val(this.textContent); 
 
    }); 
 
}); 
 

 

 
// in javascript 
 

 
window.onload = function() { 
 
    document.querySelectorAll('div.region_dropdown_content a').forEach(function(ele, index) { 
 
    ele.addEventListener('click', function(e) { 
 
     document.getElementById('SearchInput').value = this.textContent; 
 
    }); 
 
    }) 
 
};

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; 
 
    vertical-align: baseline; 
 
    outline: none; 
 
} 
 

 
body { 
 
    background: url(../images/background/body_background.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo img{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 

 
.SearchSummoners { 
 
    margin: auto; 
 
    width: 35%; 
 
    padding: 10px; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    border: 1px solid; 
 

 
    -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%); 
 
    border-image: linear-gradient(to bottom, #006184 0%, #303142 100%); 
 
    border-image-slice: 1; 
 
} 
 

 
/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.region_dropdown_section { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.region_dropdown_content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.region_dropdown_content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.region_dropdown_content a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.region_dropdown_section:hover .region_dropdown_content { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.region_dropdown_section:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.Searchbox_Summoners { 
 
    margin: auto; 
 
    display: block; 
 
    width: 65%; 
 
} 
 

 
#SearchBox{ 
 
    margin-right: 10%; 
 
    margin-left: 10%; 
 
    width: 80%; 
 
    background-color: white; 
 
    height: 40px;; 
 
} 
 

 
#SearchInput{ 
 
    width: 70%; 
 
    line-height: 40px; 
 
    background: white; 
 
    border: 0; 
 
    outline: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 20px; 
 
    font-size: 24px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="logo"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225"> 
 
</div> 
 
<div class="SearchSummoners"> 
 
    <div id="SearchBox"> 
 
     <form method="POST"> 
 
      <input id="SearchInput" value="Enter the Summoner Name" onfocus="if(this.value == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }" type="text" name="SummonerName"></input> 
 
     </form> 
 
    </div> 
 
    <div class="region_dropdown_section"> 
 
     <button class="dropbtn">Select Region</button> 
 
     <div class="region_dropdown_content"> 
 
      <a href="#">North America</a> 
 
      <a href="#">Europe West</a> 
 
      <a href="#">Europe NE</a> 
 
      <a href="#">Korea</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

$('body').on('click',".region_dropdown_content a", function() 
{ 
var text = $(this).text(); 
$(".dropbtn").text(""); 
    $(".dropbtn").text(text); 
    $('#SearchInput').val(text); 
}); 

Answer 4

あなたはjqueryの

を使用している場合、あなたはクラスをアンカー与えることができます。

<div class="region_dropdown_section"> 
     <button class="dropbtn">Select Region</button> 
     <div class="region_dropdown_content"> 
     <a class="region" href="#">North America</a> 
     <a class="region" href="#">Europe West</a> 
     <a class="region" href="#">Europe NE</a> 
     <a class="region" href="#">Korea</a> 
     </div> 
    </div> 

いずれかをクリックした場合。ボタンのテキストをアンカータグの値に変更します。

$('.region').click(function(){ 
    $('.dropbtn').html(this.text); 
});