Question

我有以下代码，包含3个项目的2个ddls。是否可以将每个下拉列表中显示的标题更改为用户选择的任何项目，但仅使用vanilla JavaScript或CSS？任何事都会有所帮助，欢呼。

＆＃13;

 .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        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;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

＆＃13;

 <div class="dropdown">
            <button class="dropbtn">Location</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">Category</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

＆＃13;

Answer 1

var div = document.getElementsByClassName('dropdown-content');

  for(var  i =0;i<div.length;i++){

  for(var  j =0;j<div[i].children.length;j++){

   div[i].children[j].addEventListener('click',function(){

     this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
   })
  }
  }

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        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;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

<div class="dropdown">
            <button class="dropbtn">Category</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
<div class="dropdown">
            <button class="dropbtn">Location</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

Answer 2

你可以用Vanilla JS做到这一点。

您只需将点击侦听器附加到每个锚点，然后遍历父节点以找到该按钮并替换innerHTML。

请注意，anchors是您页面中的所有链接，因此如果您的页面旁边还有其他锚点，那么在定义锚点数组时，您需要更加具体一些

var anchors = document.getElementsByTagName('a');

for(var i = 0, len = anchors.length; i < len; i++) {
  var thisAnchor = anchors[i];
    thisAnchor.onclick = function () {
        var btn = this.parentNode.parentNode.getElementsByTagName('button')[0];
        btn.innerHTML = this.innerHTML;
    }
}

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        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;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

<div class="dropdown">
            <button class="dropbtn">Location</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">Category</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

Answer 3

这是一个jsfiddle给你。 JSFIDDLE

<div class="dropdown">
        <button id="btn1" class="dropbtn">Location</button>
  <div class="dropdown-content">
    <a href="#" onclick="doSelect('Link 1','btn1')">Link 1</a>
    <a href="#" onclick="doSelect('Link 2','btn1')">Link 2</a>
    <a href="#" onclick="doSelect('Link 3','btn1')">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button id="btn2" class="dropbtn">Category</button>
  <div class="dropdown-content">
    <a href="#" onclick="doSelect('Link 1','btn2')">Link 1</a>
    <a href="#"  onclick="doSelect('Link 2','btn2')">Link 2</a>
    <a href="#"  onclick="doSelect('Link 3','btn2')">Link 3</a>
  </div>
</div>

<script>
function doSelect(text,btn){

    var myElement = document.getElementById(btn);

myElement.innerText = text;

}
</script>

选择项目时下拉标题更改

3 个答案: