好吧,所以我在询问之前进行了研究,但他们似乎使用了复杂的东西,比如克隆(?)我需要的东西非常简单,我做不到或者不知道是否可以在 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>
最佳答案
您可以在 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()
});
});
关于javascript - 基于第一个下拉列表的动态第二个下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26159665/