![](/img/trans.png)
[英]Add selected for jQuery to change a second select list based on the first select list option
[英]How jQuery to change a second select list based on the Third select list option and second select based upon first
為什么第三個選擇選項基於第二個選項而變化。 但是,當選擇了第一選擇時,第二個正在更改。 雖然轉到第二個第三個並沒有改變這是我的觀點。
<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>
由於HTML中沒有select1的id屬性,因此Select1不起作用。
<!-- change -->
<select name="select1" select="select1">
<!-- to -->
<select name="select1" id="select1">
同樣,數據值和選項值之間似乎有些不匹配。
val
保留為該選項的實際值,並保留其前身的data-value
。 '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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.