Question

我现在关注的是显示我显示的其他下拉菜单的下拉菜单，并且我想要我们称之为＆＃34;主要下拉列表＆＃34;更改子下拉列表中的项目。

（更好理解的背景）我是js的新手我正在尝试制作一张健身卡，主下拉菜单将成为选择当前用户正在做的肌肉群的选择器，如果用户选择胸部和胸部三，我希望用户可以在选择＆＃34;胸部＆＃34;从主下拉列表，当用户在另一个主下拉列表中选择三头肌时，我希望显示三头肌锻炼。因此，对于用户选择的特定肌肉群，仅显示该肌肉群的锻炼，因此如果用户选择肩膀，我不希望深蹲或硬拉出现等。到目前为止，这是我生锈的代码

<html>

<link rel="stylesheet" type="text/css" href="scratch.css">

<header>


</header>
<body>
<h1>SNAP YA MF WORKOUT & SEND TO YA HOMIES!</h1>
<table id="first">
<tr>
    <th>Lift</th>
    <th>Weight</th>
    <th>no idea</th>
</tr>
<tr>
    <td>dropdown</td>
    <td>dropdown</td>
    <td>dropdown</td>
</tr>
<tr>
    <td>dropdown</td>
    <td>dropdown</td>
    <td>dropdown</td>

</tr>
</table>
 <div id = t1button> <button onclick="myFunction()">+</button></div>
 <div id = t1pre> <button onclick="preFunction()">-</button></div>
<script type="text/javascript">
function myFunction() {
var table = document.getElementById("first");

var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var txt = document.createTextNode("dropdown");
var txt2 = document.createTextNode("dropdown");
var txt3 = document.createTextNode("dropdown");


td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);

td2.appendChild(txt2);
tr.appendChild(td2);
table.appendChild(tr);

td3.appendChild(txt3);
tr.appendChild(td3);
table.appendChild(tr);

}
function deleteRow() {
var row = 
}
</script>

<table id="second">
<tr>
    <th>Lift</th>
    <th>Weight</th>
    <th>no idea</th>
</tr>
<tr>
    <td>dropdown</td>
    <td>dropdown</td>
    <td>dropdown</td>
</tr>
<tr>
    <td>dropdown</td>
    <td>dropdown</td>
    <td>dropdown</td>

</tr>
</table>







</body>
</html>


table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

 td, th {
 border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}


#first, #second{
text-align: center;
display: inline;
margin: 0 auto;

} 
#t1button{
position: wrap;

Answer 1

您的问题是根据所选选项更新选择选项。

解决此问题的好主意是创建两个选择框，并根据第一个选择框显示选项。

 <select name="select1" id="select1">
     <option value="">Please select the option</option>
     <option value="lift">Lift</option>
     <option value="weight">Weight</option>
     <option value="chest">Chest</option>
 </select>

 <select name="select2" id="select2" disabled="disabled">
     <option value="">Sub Options</option>
 </select>

 $(document).ready(function () {
     var options = {
         'lift' : {
             'lift-dropdown1' : 'Lift Dropdown 1',
             'lift-dropdown2' : 'Lift Dropdown 2',
             'lift-dropdown3' : 'Lift Dropdown 3',
         },
         'weight' : {
             'weight-dropdown1' : 'Weight Dropdown 1',
             'weight-dropdown2' : 'Weight Dropdown 2',
             'weight-dropdown3' : 'Weight Dropdown 3',
         },
         'chest' : {
             'chest-dropdown1' : 'Chest Dropdown 1',
             'chest-dropdown2' : 'Chest Dropdown 2',
             'chest-dropdown3' : 'Chest Dropdown 3',
         },
     };

     $('#select1').on('change', function () {
          var $el = $("#select2");
          $el.attr('disabled', 'disabled');
          var selectedOption = $(this).val();
          $el.empty(); // remove old options
          $.each(options[selectedOption], function(key,value) {
            $el.append($("<option></option>")
               .attr("value", value).text(key));
          });
          $el.removeAttr('disabled');
     })
 });

此外，您可以参考此处https://jsfiddle.net/Sakshigargit15/4um3fqt8/11/

中的运行代码

如何制作一个下拉列表，更改我的其他下拉菜单的选项

1 个答案: