Question

好的，所以我在问之前进行了研究，但他们似乎使用复杂的东西，如克隆（？）我需要的是非常简单的，我不能这样做或者不知道它是否可以在php中进行。< / p>

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

这是我的第一次下拉：

<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，但我认为有一种更简单的方法？...帮助。

EDITED：这是代码。

<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选择f.e

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

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

2 个答案:

JQUERY