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

【问题标题】：Changing the text of a button when clicking an attribute in the dropdown of it?单击下拉列表中的属性时更改按钮的文本？
【发布时间】：2016-08-03 13:25:55
【问题描述】：

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

当他们点击他们想要的区域时，按钮的主要值需要改变。

我还希望按钮位于右侧的搜索栏中，但它总是将其放在其下方，就像您在示例中看到的那样。我尝试了很多不同的选项，但我无法解决这个问题。

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'; ?>

【问题讨论】：

  • 您需要 JavaScript 或 jquery 的解决方案吗？
  • 好吧，我使用了@Ivan Karaman 的解决方案。但是现在有一个错误。每当我单击一个区域时，它都会发生变化，但是当我在按钮外部单击时，该区域会被删除，并且按钮会变为空。

标签： javascript php jquery html css


【解决方案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'; ?>

【讨论】：

  • 你好，这对我来说已经很棒了。现在我还有两个问题。单击某个区域并离开后，有时该按钮会变为空白和空白。按钮的大小也在不断变化，是否有可能具有 1 个标准大小，因此在选择文本较小的区域时它不会改变大小。那么我将如何将下拉列表放在右侧的搜索框中？这个我试过了，还是不行。
【解决方案2】：

解决方案可能是：

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

该解决方案可以用 jQuery 和 javascript 实现。

sn-p：

$(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>

【讨论】：

  • 啊，效果很好，但是按钮必须更改文本。该地区不必进入搜索框。此外，该按钮需要位于右侧的搜索框中，如下所示：gyazo.com/8d2f642b02b7a0de0ebfa5ebf11dd74c 感谢您的工作！对不起，如果我用错了，我的英语不好
  • @BPrepper 别担心。非常感谢与我们在一起。
【解决方案3】： 
$('body').on('click',".region_dropdown_content a", function()
{
 var text = $(this).text();
 $(".dropbtn").text("");
  $(".dropbtn").text(text);
   $('#SearchInput').val(text);
 });

【讨论】：

    【解决方案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);
});

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-11-06
      • 2012-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode