基于第一个下拉列表的动态第二个下拉列表

Question

好的，所以我在问之前进行了研究，但是他们似乎使用了诸如cloning（？）之类的复杂东西，我真正需要的很简单，我做不到，或者不知道是否可以在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>

我尝试使用ifs在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>

Answer 1

您可以尝试以下代码，并在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() 
    });  
});

Answer 2

如果需要在不刷新页面的情况下显示页面，则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>