单击下拉菜单中的属性时更改按钮的文本？

Question

我有一个下拉按钮，进入网页时，该按钮显示“选择区域”。 如果将鼠标悬停在该按钮上，则会得到不同的区域。

单击他们想要的区域时，按钮的主要值需要更改。

另外，我希望按钮位于右侧的搜索栏中，但始终将其置于其下方，如示例中所示。 我尝试了很多不同的选项，但无法解决此问题。

 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; } 

 <?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更改按钮文本...

更新：修复了空按钮文本

 $(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; margin-right: 10%; margin-left: 10%; width: 50%; 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://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

解决方案可能是：

对于具有class region_dropdown_content类的div下的每个锚，请附加click事件处理程序。 在此处理程序中，根据用户选择更改字段的值。

该解决方案可以在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);
});