Question

<div>
    <div>
        <button id="storageList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">64gb 
        </button>
        <ul id="storagedrop" class="dropdown-menu col-xs-12 p-l-0">
            <li> <a href="#">64gb</a> </li>
            <li> <a href="#">32gb</a> </li>
            <li> <a href="#">16gb</a> </li>       
            <li> <a href="#">8gb</a> </li>
        </ul>       
    </div>
    <div>
        <button id="colorList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gold 
        </button>
        <ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
            <li> <a href="#">red</a> </li>
            <li> <a href="#">green</a> </li>
            <li> <a href="#">blue</a> </li>       
            <li> <a href="#">yellow</a> </li>
        </ul>       
    </div>
</div>

在选择64,32,16,8gb时，第二个下拉值应该改变。比如64gb，目前的颜色只有红色和绿色，32gb只有蓝色。那么如何通过在第一个下拉列表中硬编码所选值的颜色值来获得这些值。即如果我在第一个下拉列表中单击64gb，它应该在第二个下拉列表中仅显示红色和绿色，同样对于其他下拉列表也是如此。

这就是我的尝试：

$("#storagedrop > li").click(function(event){
          var storageListData = $(this).text();

            // if you click on memory then color will change
            if(storageListData.match('64gb'))
            {   
                document.getElementById('colorList').innerHTML = "Red 1";
                document.getElementById('colordrop').innerHTML = "Red 1"+ "<br />" +"Blue 1" + "<br />" +"Green";
            }
             if(storageListData.match('32gb'))
            {   
                document.getElementById('colorList').innerHTML = "Red 2";
                document.getElementById('colordrop').innerHTML = "Red 2"+ "<br />" +"Blue 2"+ "<br />" +"yellow";
            }
    });

But i dont want this 64gb to be hardcoded it should be fetched onclick and then upon clicking it should change color dropdown and one DOM element(below is the code where it should update after both dropdowns are selected)

$("#colordrop > li").click(function(event){
  var colorListData = $(this).text(); 
  console.log(colorListData);
  document.getElementById('price').innerHTML = colorListData;
    document.getElementById('colorList').innerHTML = colorListData;
});

此处颜色下拉列表正在更新DIV标记中的值，但我想要两个下拉列表的组合来更新值。使用案例：在选择存储时，应该会出现64GB等颜色（第二个下拉值）和价格值。两个事件都应该发生。我的代码是单独更新值。请指导。

Answer 1

您可以推荐我的article。在本文中，您可以获得所需的信息。

Answer 2

我给你另一个example供你参考。

    $("#storagedrop > li").click(function(event)
                                                     {
                                                var storageListData = $(this).text();
                            var colordrop=$("#colordrop"); 
                            colordrop.empty();

                            child="<li>"+storageListData+"</li>";
                            colordrop.append(child);
                         }
      );

如何使用jquery在作为按钮和无序列表实现的下拉列表中填充数据

2 个答案: