使选择选项取决于先前的选择答案

【问题标题】：Making a select option depend on a previous select使选择选项取决于先前的选择
【发布时间】：2021-12-11 17:18:09
【问题描述】：

我想为大小创建一个选择选项，这取决于人们在之前的类别选择中选择的内容。基本上，如果这个人选择服装类别，那么下一个选择只会显示尺码（S、M、L、XL），如果他选择鞋子，他只会显示（33、34、44、42）你明白了。

我使用 nodeJS 和 EJS 作为我的模板。我不熟悉 Jquery。

我的代码：

  <select id='inputStyle' name='category'>
    <option disabled='true'>Category</option>
    <option value='shoes'>Championes</option>
    <option value='shirts'>Camiseta</option>
    <option value=''>sweatshirts</option>
    <option value='others'>Otro</option>
  </select>
</div>
<div class='inputStyle'>
  <label for='size'> Size </label>
  <br>
  <select id='size' name='size'>
    <option value=''></option>
    <option value=''></option>
    <option value=''></option>
    <option value='others'></option>
  </select>

【问题讨论】：

嘿伙计。我猜你正在为此使用 react.js？请 lmk 以便我可以为您提供更好的答案。
@TomasMota 我真的很好奇是什么让你认为他在使用 react，因为他提到了 jQuery？
大家好，我不确定你所说的反应是什么意思。我最终会学习反应，但还没有。我使用 node.js 模板的纯 CSS 和 EJS 模板。我说的是我不熟悉jquery。谢谢！

标签： javascript html css node.js select

【解决方案1】：

您只需使用以下代码即可。只需根据您的需要替换列表即可。

var sizeForShoes = ["40", "44", "42", "46", "50"]; 
var sizeForDress = ["S", "M", "L", "XL", "XXL"]; 

$('#Category').change(function() {
    var selectedCategory = $('#Category').val();  
    if(selectedCategory != ""){
    
   //Removing current option
    $('#size').find('option').remove();

    var sizeList = [];
   
   if(selectedCategory == 'shoes'){
    for (var i = 1; i <= sizeForShoes.length; i++) {
    var shoeSize = sizeForShoes[i];
$('#size').append($("<option></option>").attr("value", shoeSize).text(shoeSize));
    }
   }
   else{
     for (var i = 1; i <= sizeForDress.length; i++) {
     var dressSize = sizeForDress[i];
        $('#size').append($("<option></option>").attr("value", dressSize).text(dressSize));
    }
   } 
   }else{
   
   //If nothing is selected then it will remove previous options

   $("#size").empty();
    $('#size').append($("<option></option>").attr("value", "").text("Select size"));
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="Category">Category</label>
<select id="Category" name="Category" >
  <option value="">Select Category</option>
   <option value='shoes'>Championes</option>
  <option value='shirts'>Camiseta</option>
  <option value='sweatshirts'>sweatshirts</option>
  <option value='others'>Otro</option>
</select><br><br>

<label for="size">Size</label>
<select id="size" name="size">
  <option value="">Select size</option>
</select>

【讨论】：