Javascript 如何制作一个下拉列表来更改其他下拉列表的选项_Javascript_Html_Css

Javascript 如何制作一个下拉列表来更改其他下拉列表的选项

javascript html css

Javascript 如何制作一个下拉列表来更改其他下拉列表的选项,javascript,html,css,Javascript,Html,Css,我现在关注的是为我的其他下拉列表显示一个下拉列表，我希望我们称之为我的主下拉列表来更改我的子下拉列表中的项目背景知识，以便更好地理解我是js的新手我正在尝试制作一张训练卡，主下拉菜单将作为选择用户当天所做肌肉群的选择器，如果用户从主下拉菜单中选择胸部，我希望用户可以从中选择训练，当用户在其他主下拉列表中选择三头肌时，我希望显示三头肌训练。因此，对于用户选择的特定肌肉组，只有该肌肉组的训练显示，因此如果用户选择肩部，我不希望出现蹲起或负重等。这是到目前为止我的生锈代码 <html

我现在关注的是为我的其他下拉列表显示一个下拉列表，我希望我们称之为我的主下拉列表来更改我的子下拉列表中的项目

背景知识，以便更好地理解我是js的新手我正在尝试制作一张训练卡，主下拉菜单将作为选择用户当天所做肌肉群的选择器，如果用户从主下拉菜单中选择胸部，我希望用户可以从中选择训练，当用户在其他主下拉列表中选择三头肌时，我希望显示三头肌训练。因此，对于用户选择的特定肌肉组，只有该肌肉组的训练显示，因此如果用户选择肩部，我不希望出现蹲起或负重等。这是到目前为止我的生锈代码

<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;

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

解决此问题的好办法是创建两个选择框，并在第一个选择框的基础上在第二个选择框中显示选项

 <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');
     })
 });

此外，您可以从这里引用正在运行的代码

如果您构建了所有下拉列表，然后根据需要使用javascript/css显示/隐藏子列表，而不是尝试更改下拉列表中的选项，那么您可能会有不错的运气。当选择项目时，更改选项也可能会有一些错误行为。太棒了！正是我要找的！