Question

单击切换后，如何更改按钮值是angularJs中的切换列表上的单击值？

我已编写此代码，请帮助我？我还解释了代码，仅在单击切换后，我才需要如何工作。如何更改按钮值是在angularJs中的切换列表上单击值。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
     min-width: 162px;
     position:reletive;
font-weight:bold;
}

.dropbtn:after{
    content: '';
    border-top: 8px solid white;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    left: 75px;
    position: absolute;
    top: 37px;

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    border:1px solid  #3498DB;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-top:2px solid  #3498DB;
}



.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>

编写html代码

<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

Answer 1

在javascript中获得所选值后，请使用以下代码将该值分配给按钮值：

document.getElementById("button_Name").innerHTML = selectedValueFromDropdown;

Answer 2

在您的window.onclick函数中，您可以添加此修复程序：

if (!event.target.matches('.dropbtn a')) {
    document.getElementById("test").innerHTML = event.target.innerHTML;
}

因此，如果您单击“选项”按钮之一，则下拉按钮的innerHTML（文本）将采用该选项之一。

完整代码（或CodePen.io：

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
     if (!event.target.matches('.dropbtn a')) {
       document.getElementById("test").innerHTML = event.target.innerHTML;
     }
  }
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
     min-width: 162px;
     position:reletive;
font-weight:bold;
}

.dropbtn:after{
    content: '';
    border-top: 8px solid white;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    left: 75px;
    position: absolute;
    top: 37px;

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    border:1px solid  #3498DB;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-top:2px solid  #3498DB;
}



.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>


</body>
</html>

顺便说一句，在您的代码中，您没有使用AngularJS：）

点击切换按钮后，如何更改按钮值是angularJs切换列表中的点击值？

2 个答案: