HTML表单第一个下拉自动改变第二个下拉选项
我对第一个下拉验证码:HTML表单第一个下拉自动改变第二个下拉选项
<td align="left" style="padding-bottom:10px">
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
</td>
,我也有不同颜色的前一选项第二类。 例如: 如果我选择Cars,第二个下拉菜单将显示为选择“红色”,“绿色”或“蓝色”,但是如果我选择卡车,第二个下拉菜单将显示为仅选择“黑色”或“白色”选项。
第二个下拉选项将会到mySQL DB中的同一列(子类别),因此没有Car在子类别列上具有值“Black”或没有在子类别列上具有值“Red”的值。
感谢
工作例如:http://jsfiddle.net/7YeL6/4/
鉴于这种结构:
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
<div>
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
您可以使用jQuery .change
功能:
$("#category").change(function() {
var str = "";
str = $("select#category option:selected").text();
if(str == "Trucks"){
$("select.second").not("#truck").hide();
$("#truck").show();
$("#truck").fadeIn(1000);
}
else if(str == "Cars"){
$("select.second").not("#car").hide();
$("#car").show();
$("#car").fadeIn(1000);
}
})
CSS
#category2{
display: none;
}
这是如何适应选择汽车..然后卡车..? – ethrbunny 2013-03-25 16:58:30
我去js小提琴,当选择一个选项弹出与消息与选定的选项出现,我明白了。但我不知道如何为每个选项编写新的下拉菜单。你能否给我提供代码给一个新的下拉列表,用不同的结果生成或显示我的方式抛出一些指南或什么?新游戏,对不起 – 2013-03-25 16:58:56
选择卡车 - 它会工作。您可以更改它以使其适用于其他值。 – 2013-03-25 16:59:29
听起来就像你需要一个Ajax类型的解决方案。将其绑定到第一个控件上的“更改选择”事件。使用结果查询第二个(和后续)控件的可用值。 – ethrbunny 2013-03-25 16:49:31
如果没有更多信息,很难提供帮助。后端语言是什么? PHP?你有什么尝试?你使用jQuery吗? etc ... – 2013-03-25 16:51:10
后端语言是php。即时通讯不使用jQuery,因为直到现在还没有需要它 – 2013-03-25 17:02:48