[英]Dynamic 2nd Dropdown-list based on the 1st Dropdown
Ok, so I researched before asking, but they seem to use complicated stuff like cloning(?) what I need is really simple and I can't do it or don't know if its possible to do in php. 好的,所以我在问之前进行了研究,但是他们似乎使用了诸如cloning(?)之类的复杂东西,我真正需要的很简单,我做不到,或者不知道是否可以在php中做。
I need the 2nd dropdown-list to appear depending on what is currently selected (before submit) in the first dropdown. 我需要显示第二个下拉列表,具体取决于第一个下拉列表中当前选择的内容(提交之前)。
Here is my 1st Dropdown: 这是我的第一个下拉列表:
<select name="category">
<option value="Vitamin">Vitamin</option>
<option value="Supplement">Supplement</option>
<option value="Therapy Machine">Therapy Machine</option>
</select>
Then for example I selected "Vitamin", the second dropdown options should be 然后,例如,我选择了“维生素”,第二个下拉选项应为
<select name="subcategory">
<option value="Vitamin A">VitaminA</option>
<option value="Vitamin B">VitaminB</option>
<option value="Vitamin C">VitaminC</option>
</select>
I tried doing it in php using ifs. 我尝试使用ifs在php中进行操作。 I can't almost understand js, but I think there's a simpler way?... help.
我几乎无法理解js,但是我认为有一种更简单的方法?...帮助。
EDITED: Here's the code. 编辑:这是代码。
<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>
you can try following code and on Fiddle 您可以尝试以下代码,并在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>
$(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()
});
});
If it needs to appear without a page refresh then js is your only option, if the page does refresh it's easy in PHP, just create a form and depending on the post data in it create the second select. 如果需要在不刷新页面的情况下显示页面,则js是您唯一的选择,如果页面确实刷新了,则在PHP中很容易,只需创建一个表单,然后根据其中的发布数据创建第二个选择。
With javascript the easiest option is to load all the selects but append a class to it and depending which category is selected hide/show the right selects fe with jquery 使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.