多个选择选项一个依赖于另一个
Multi selection option one depend one another
我想让一个多选择依赖于另一个。当我选择水果时,它会显示三个选项,香蕉,橙子,苹果,然后选择香蕉,它会显示另一个选项,红色,橙色,黄色。但是问题显示为红色或黄色所以第三类i面对问题
<html>
<head>
</head>
</body>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value=""></option>
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
// here is my problem
<select name="select3" id="select3">
<option value=""></option>
<option value="1">red</option>
<option value="1">orange</option>
<option value="1">yellow</option>
<option value="2">white</option>
<option value="2">gray</option>
<option value="2">blue</option>
<option value="3">ash</option>
<option value="3">silver</option>
<option value="4">gold<option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript">
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
$("#select2").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select3').html(options);
});
</script>
</body>
</html>
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value1=' + id + ']');
$('#select3').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value1 = "1" value=""></option>
<option value1 = "1" value="1">Banana</option>
<option value1 = "1" value="1">Apple</option>
<option value1 = "2" value="1">Orange</option>
<option value1 = "2" value="2">Wolf</option>
<option value1 = "2" value="2">Fox</option>
<option value1 = "3" value="2">Bear</option>
<option value1 = "3" value="3">Eagle</option>
<option value1 = "4" value="3">Hawk</option>
<option value1 = "4" value="4">BWM<option>
</select>
<select name="select3" id="select3">
<option value1 = "1" value=""></option>
<option value1 = "1" value="1">red</option>
<option value1 = "1" value="1">orange</option>
<option value1 = "2" value="1">yellow</option>
<option value1 = "2" value="2">white</option>
<option value1 = "2" value="2">gray</option>
<option value1 = "3" value="2">blue</option>
<option value1 = "3" value="3">ash</option>
<option value1 = "4" value="3">silver</option>
<option value1 = "4" value="4">gold<option>
</select>
相关文章:
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- 如何使用 2 个 XMLHttpRequest 一个依赖于另一个
- Javascript表单.使一个条目依赖于另一个条目
- 试图使一个事件依赖于另一个事件,并使用jquery自定义事件传递数据
- 使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项)
- 测试依赖于另一个指令Angularjs的指令
- 创建一个不依赖于Snap实例的组
- 使计算属性依赖于emberjs中另一个对象的所有属性
- 打开一个模态(在Codeigniter中),该模态从依赖于phpvar的URL加载(在iframe中)内容
- 是否有一个不依赖于 AngularJS 以外的其他框架的 angular 拆分窗格库
- 下拉选项依赖于另一个下拉选项(所有值都来自数据库)
- 如何只运行一个函数一次,然后运行另一个依赖于相同元素的函数
- 创建一个依赖于可观察量“树”的 Knockout 绑定处理程序
- 检查可见性并使用jquery/javascript添加一个类,但不能依赖于滚动事件
- 在Angular2中添加一个依赖于组件名的外部Javascript文件
- 多个Ajax请求的结果,一个依赖于其他Ajax输出
- 嵌套的重复,一个依赖于另一个
- 多个选择选项一个依赖于另一个
- 生成一个依赖于递归承诺的承诺
- 我想定义一个css样式表或添加一个依赖于视口大小的主体类