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

Question

好的，我在提问之前进行了研究，但是他们似乎使用了复杂的东西，比如克隆(?)，但我需要的确实很简单，我无法做到或者不知道是否可能在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>

- Jeremy23

---

你需要使用jQuery和PHP - 展示你尝试过的PHP代码。 - justrohu

谢谢您的提问。将optgroup B中的VitaminA更改为SupplementA等等，以便更好地理解。 - Anupam

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

- kuldipem

---

最好修正 cateogery 的拼写，否则你会让他感到困惑 :) - iCollect.it Ltd

抱歉回复晚了，但是我需要帮助。为什么这对我不起作用？我已经匹配了我的#category…（我通过<script>在同一个文件中包含了它）。 - Jeremy23

请确保您已经添加了 JQuery。您可以粘贴您的代码吗？ - kuldipem

嗨@Jeremy23，我使用你的代码创建了Fiddle http://jsfiddle.net/g7gphk1r，它运行正常，我认为你忘记添加“Jquery”了。 - kuldipem

非常抱歉，但是您说的“我忘记了Jquery”，这是什么意思？除了您给出的代码之外，我需要包含其他任何内容吗？ - Jeremy23

Answer 2

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

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

- tmas

---

更好的选择是通过 ajax 加载选项，但那是更进一步的步骤。 - tmas