Multi selection option one depend one another

Question

i want to make a multi selection one is depend to another. when i select fruit then it show three option banana orange aple then select banbana it show another option red orange yellow.But problem show in red orege yellow so third type i face problem

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

Please tell us what is causing the issue and also write clearly so we can help you. — Script47, Aug 08 '15 at 18:08
Your grammar and spelling are awful. Please work on more clearly explaining the issue you're having. — j08691, Aug 08 '15 at 23:11
when i select fruit then second option show that banana orange etc but when i select banana it must show third option color of it ... But third selection is not work properly — Mahbub Khan, Aug 09 '15 at 05:02
i want to make a country code when some one select a country then second selection state when select state then third selection show city when select city then fourth selection show the area. How can i do this — Mahbub Khan, Aug 09 '15 at 05:05
Either with Ajax requests (then you need eg. PHP to look in a Database for the new values and give the response to the ajax request) or just hard-code a Javascript that contains all possible combinations and manipulates the second and third select depending on the first one... Are you using a Database and any PHP framework or do you want to use only Javascript? Also please use the search function, there are a lot of [similar questions](http://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option) ... — Oops D'oh, Aug 09 '15 at 06:07

score 0 · Answer 1 · answered Mar 09 '17 at 09:16

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

Welcome to Stack Overflow, What is this code doing? Please elaborate, how is this answering the question? Spend some time and take a [tour](http://stackoverflow.com/tour) of the site and read [how to write an answer](http://stackoverflow.com/help/how-to-answer). — Hizqeel, Mar 09 '17 at 09:24

Multi selection option one depend one another

1 Answers1