基于第一个下拉列表的动态第二个下拉列表 - Dynamic 2nd Dropdown-list based on the 1st Dropdown

好的，所以我在询问之前进行了研究，但他们似乎使用了复杂的东西，比如克隆（？）。我需要的东西非常简单，我无法做到，或者不知道是否可以在php中做到。

我需要第二个下拉列表显示，这取决于第一个下拉列表中当前选择的内容（在提交之前）。

这是我的第一个下拉菜单：

<select name="category">
<option value="Vitamin">Vitamin</option>
<option value="Supplement">Supplement</option>
<option value="Therapy Machine">Therapy Machine</option>
</select>

例如，我选择了"维生素"，第二个下拉选项应该是

<select name="subcategory">
<option value="Vitamin A">VitaminA</option>
<option value="Vitamin B">VitaminB</option>
<option value="Vitamin C">VitaminC</option>
</select>

我试着用if在php中做这件事。我几乎不能理解js，但我认为有一种更简单的方法？。。。帮助

编辑：这是代码。

<select name="category" id="category">
   <option value="Vitamin" selected>Vitamin</option>
   <option value="Supplement">Supplement</option>
   <option value="Therapy Machine">Therapy Machine</option>
</select>
<select name="subcategory" id="subcategory">
 <optgroup label="Vitamin">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
  <optgroup id="B" label="Supplement" disabled>
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
  <optgroup id="C" label="Therapy Machine" disabled>
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
 </select>
And the JS
 <script>
 $(document).ready(function(){
 $("#category").on("change",function(){
    var selectedVal=$( "#category option:selected" ).val();
    $("#subcategory > optgroup").attr("disabled","disabled");
    $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
 });  
 });
</script>

您可以在Fiddle 上尝试以下代码

<select name="category" id="cateogery">
    <option value="Vitamin" selected>Vitamin</option>
    <option value="Supplement">Supplement</option>
    <option value="Therapy Machine">Therapy Machine</option>
</select>
<select name="subcategory" id="subcategory">
     <optgroup label="Vitamin">
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
    <optgroup id="B" label="Supplement" disabled>
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
    <optgroup id="C" label="Therapy Machine" disabled>
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
</select>

JQUERY

$(document).ready(function(){
    $("#category").on("change",function(){
        var selectedVal=$( "#category option:selected" ).val();
        $("#subcategory > optgroup").attr("disabled","disabled");
        //$("#subcategory > optgroup").hide(); // you can also hide option insted make them just disabled
        $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
       // $('#subcategory > optgroup[label="'+selectedVal+'"]').show() 
    });  
});

如果它需要在没有页面刷新的情况下出现，那么js是你唯一的选择，如果页面确实刷新了，在PHP中很容易，只需创建一个表单，并根据其中的帖子数据创建第二个选择。

使用javascript，最简单的选择是加载所有选择，但在其中附加一个类，并根据选择的类别隐藏/显示右侧选择。使用jquery

<select name="category" id="category">
    <option value="Vitamin">Vitamin</option>
    <option value="Supplement">Supplement</option>
    <option value="Therapy Machine">Therapy Machine</option>
</select>
<select id="subcategory_Vitamin" class="subcategory">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
</select>
<select id="subcategory_Supplement" class="subcategory">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
</select>
<script>
$(function() {
    $('#category').change(function() {
          $('.subcategory').hide();
          var v =  $('#category option:selected').val();
          $('#subcategory_' + v).show();
    });
});
</script>