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

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

维生素A
维生素B
维生素C

我试着使用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>

维生素
补充
治疗机
维生素A
维生素B
维生素C
维生素A
维生素B
维生素C
维生素A
维生素B
维生素C
还有JS
$（文档）.ready（函数（）{
$（“类别”）。关于（“更改”，函数（）{
var selectedVal=$（“#类别选项：选中”）.val（）；
$（“#子类别>optgroup”）.attr（“禁用”、“禁用”）；
$（“#子类别>optgroup[label=“”+selectedVal+”）。移除属性（“禁用”）；
});  
});

如果需要在不刷新页面的情况下显示，那么js是您唯一的选择，如果页面确实刷新，那么在PHP中很容易，只需创建一个表单，并根据表单中的post数据创建第二个选择

使用javascript，最简单的选项是加载所有选择，但向其附加一个类，并根据选择的类别隐藏/显示正确的选择

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

维生素
补充
治疗机
维生素A
维生素B
维生素C
维生素A
维生素B
维生素C
$（函数（）{
$（'#category'）。更改（函数（）{
$（'.subcategory'）.hide（）；
var v=$（“#类别选项：选定”）.val（）；
$（'#子类别'+v）.show（）；
});
});

您可以尝试以下代码并继续

---

您需要使用jquery和php—向我们展示您尝试过的phpThanks问题代码。将VitaminA更改为optgroup B中的SupplementA对其他人来说是有帮助的，以便更好地理解。更好的选择是通过ajax加载选项，但这是一个更进一步的步骤更好地修复

cateogery

的拼写，否则你只会把他弄糊涂：）对不起，回复太晚了，但我需要帮助，为什么这对我不起作用？但是我符合我的#类别。。。（我通过将其包含在同一文件中）确保添加了JQuery。你能粘贴你的代码吗？嗨@Jeremy23，我已经用你的代码创建了Fiddle，它工作得很好，我想你忘了添加

Jquery

。我真的很抱歉，但是，我忘了Jquery是什么意思？除了你给出的代码之外，还有什么我需要包括的吗？

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

$(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() 
    });  
});