如何更改下拉按钮列表中的按钮名称以替换第一个按钮

Question

我目前正在做一个下拉按钮，我想在用户点击它时将按钮文本更改为特定的文本，例如当用户点击英语时，第一个按钮将更改为文本英语等在。我尝试了下面的方法，但没有用。

下面是我的 HTML 代码：

       <div class="dropdown">
          <button
            onclick="myFunction();hideBorder();change()"
            class="dropbtn"
            id="chi"
          >
            CHINESE
          </button>
          <div id="myDropdown" class="dropdown-content">
            <button id="eng">ENGLISH</button>
            <button id="fre">FRENCH</button>
            <button id="ger">GERMAN</button>
            <button id="ita">ITALIAN</button>
            <button id="mal">MALAY</button>
            <button id="spa">SPANISH</button>
          </div>
        </div>

下面是我的 JavaScript 代码：

function change() {
  var btn1 = document.getElementById("chi");
  var btn2 = document.getElementById("eng");
  if (btn2.onclick) {
    btn1.value = "ENGLISH";
  }
}

这是我的下拉按钮的例子：

Answer 1

使用 btn1.innerHtml 或 btn1.innerText 而不是 btn1.value。当您使用按钮时，文本实际上不是值，而是一个子节点。如果您使用的是 <input type="button"/>，您的代码也可以正常工作，因为在输入按钮上，该值用作文本。

我有点不明白为什么要在代码中添加 if (btn2.onclick) {。你的 btn2 没有事件监听器。因此，该查询将始终为假（并且文本未更改），因为 btn2.onclick 未定义。

Answer 2

这是我为你做的。希望这就是您所看到的

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".dropdown-content").slideToggle();
  });

$(".option").click(function(){
    $(".dropdown-content").slideToggle();
  });
  
$("#chi").click(function(){
    $("button").html('CHINESE');
  });

$("#eng").click(function(){
    $("button").html('ENGLISH');
  });

$("#fre").click(function(){
    $("button").html('FRENCH');
  });
  
$("#ger").click(function(){
    $("button").html('GERMAN');
  });
  
$("#ita").click(function(){
    $("button").html('ITALIAN');
  });
$("#mal").click(function(){
    $("button").html('MALAY');
  });

$("#spa").click(function(){
    $("button").html('SPANISH');
  });
 });
</script>

</head>
<style>
button.language {
  background-color:white;
  width:110px;
  height:auto;
  border:2px solid lightblue;
  border-radius:10px;
  padding:5px;
  font-size:16px;
  font-weight:bold;
  }
  
.dropdown-content {
  width:110px;
  height:auto;
  border:2px solid lightblue;
  padding:5px 0px;
  color:black;
  font-weight:bold;
  font-size:16px;
  border-radius:10px;
  cursor:pointer;
  display:none;
  border-top:0px solid lightblue;
  }
  
.option {padding:10px;}
.option:hover {background-color:lightblue;}

</style>
<body>
<div class="dropdown">
    <button class="language" value="CHINESE">CHINESE</button>
          <div id="myDropdown" class="dropdown-content">
            <div class="option" id="chi" value="CHINESE">CHINESE</div>
            <div class="option" id="eng" value="ENGLISH">ENGLISH</div>
            <div class="option" id="fre" value="FRENCH">FRENCH</div>
            <div class="option" id="ger" value="GERMAN">GERMAN</div>
            <div class="option" id="ita" value="ITALIAN">ITALIAN</div>
            <div class="option" id="mal" value="MALAY">MALAY</div>
            <div class="option" id="spa" value="SPANISH">SPANISH</div>
          </div>
        </div>

</body>
</html>

.dropdown-content {width:150px;}

<div class="dropdown">

          <select id="myDropdown" class="dropdown-content">
            <option id="chi">CHINESE</option>
            <option id="eng">ENGLISH</option>
            <option id="fre">FRENCH</option>
            <option id="ger">GERMAN</option>
            <option id="ita">ITALIAN</option>
            <option id="mal">MALAY</option>
            <option id="spa">SPANISH</option>
          </select>
        </div>

我假设你想要这样的东西。

.dropdown-content {width:150px;}

     <div class="dropdown">

          <select id="myDropdown" class="dropdown-content">
            <option id="chi">CHINESE</option>
            <option id="eng">ENGLISH</option>
            <option id="fre">FRENCH</option>
            <option id="ger">GERMAN</option>
            <option id="ita">ITALIAN</option>
            <option id="mal">MALAY</option>
            <option id="spa">SPANISH</option>
          </select>
        </div>

如何更改下拉按钮列表中的按钮名称以替换第一个按钮

How to change the button name in a dropdown button list to replace the very first one button

javascript

dropdownbutton