多选择选项一个互相依赖

我想做一个多选择一个依赖于另一个。当我选择水果则显示了三种选项香蕉橘子APLE然后选择banbana显示它的另一种选择红色橙色yellow.But问题显示为红色orege黄色所以第三种类型我面对的问题多选择选项一个互相依赖

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

来源

2015-08-08 Mahbub Khan

请告诉我们是什么原因造成的问题，也写清楚，所以我们可以帮助你。 – Script47

你的语法和拼写都很糟糕。请更清楚地解释您遇到的问题。 – j08691

当我选择水果然后第二个选项显示香蕉橙等，但是当我选择香蕉它必须显示它的第三选择颜色...但第三选择不正常工作 –

$("#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>

来源

2017-03-09 09:16:56

欢迎来到堆栈溢出，这段代码在做什么？请详细说明，这是如何回答这个问题的？花一些时间，并采取网站的[旅游]（http://stackoverflow.com/tour），并阅读[如何撰写答案]（http://stackoverflow.com/help/how-to-answer）。 – Hizqeel

多选择选项一个互相依赖

回答

相关问题