jQuery가 세 번째 선택 목록 옵션을 기반으로 두 번째 선택 목록을 변경하고 두 번째 선택을 첫 번째 기준으로 변경하는 방법

Question

세 번째 선택 옵션이 두 번째 선택 기준에 따라 변경되는 이유. 그러나 첫 번째 선택이 선택되면 두 번째 것은 변경됩니다. 두 번째 셋째로가는 동안 변경되지 않습니다 이것은 내 견해입니다.

<select name="select1" select="select1"> 
    <option value="">Select Country</option> 
    <option value="india">India</option> 
    <option value="america">America</option> 
</select> 
<select name="select2" id="select2"> 
    <option value="">Select State</option> 
    <option data-value="orissa" value="india">Orissa</option> 
    <option data-value="telangan" value="india">Telangan</option> 
    <option data-value="america" value="america">USA</option> 
    <option data-value="america" value="america">California</option> 
</select> 
<select name="select3" id="select3"> 
    <option value="">Select city</option> 
    <option value="orissa">Nal</option> 
    <option value="orissa">Mir</option> 
    <option value="Telangan">Hyd</option> 
    <option value="Telangan">Vija</option> 
    <option value="america">KRK</option> 
    <option value="america">MRK</option> 
</select> 
This is my script 
<script> 
    $("#select1").change(function() { 
    if ($(this).data('options') == undefined) { 
     $(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) { 
    $(this).data('options', $('#select3 option').clone()); 
    } 
    var id = $(this).val(); 
    var options = $(this).data('options').filter('[data-value=' + id + ']'); 
    $('#select3').html(options); 
}); 
</script> 

Answer 1

HTML의 select1에 대한 id 속성이 없기 때문에 Select1이 작동하지 않습니다.

<!-- change --> 
<select name="select1" select="select1"> 
<!-- to --> 
<select name="select1" id="select1"> 

또한 데이터 값과 옵션 값간에 약간의 불일치가있는 것으로 보입니다.

1. 옵션의 실제 값은 val이고 이전 값은 data-value입니다. 이 두 값
2. 그렇게 'telangan' !== 'Telangan'

여기 코드의 업데이트 된 버전의 대소 문자를 구분합니다 : 그것은 잘 작동

$("#select1").change(function() { 
 
    if ($(this).data('options') == undefined) { 
 
    $(this).data('options', $('#select2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[data-value=' + id + ']'); 
 
    $('#select2').html(options).show(); 
 
}); 
 

 

 
$("#select2").change(function() { 
 
    if ($(this).data('options') == undefined) { 
 
    $(this).data('options', $('#select3 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[data-value=' + id + ']'); 
 
    $('#select3').html(options).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="select1" id="select1"> 
 
    <option value="">Select Country</option> 
 
    <option value="india">India</option> 
 
    <option value="america">America</option> 
 
</select> 
 

 

 
<select name="select2" id="select2" style="display: none;"> 
 
    <option value="">Select State</option> 
 
    <option data-value="india" value="orissa">Orissa</option> 
 
    <option data-value="india" value="telangan">Telangan</option> 
 
    <option data-value="america" value="america">USA</option> 
 
    <option data-value="america" value="america">California</option> 
 
</select> 
 

 
<select name="select3" id="select3" style="display: none;"> 
 
    <option value="">Select city</option> 
 
    <option data-value="orissa">Nal</option> 
 
    <option data-value="orissa">Mir</option> 
 
    <option data-value="telangan">Hyd</option> 
 
    <option data-value="telangan">Vija</option> 
 
    <option data-value="america">KRK</option> 
 
    <option data-value="america">MRK</option> 
 
</select>