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>