jQuery如何基于第三个选择列表选项更改第二个选择列表,并基于第一个更改第二选择列表
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>
Select1不起作用,因为HTML中没有Select1的id属性。
<!-- 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>
相关文章:
- Angular:使用选择列表选择过滤代码中的对象
- 在Twitter BootStrap嵌套下拉列表中托管一个选择列表(IE 9特定)
- Jquery不允许来自多个选择列表的相同值
- 谷歌表单-根据分配给谷歌应用程序的工作为商业用户预先填充多项选择列表
- 如何修剪表单'提交'多级选择列表的值
- 使用jQuery获取选择列表中每个更改的值
- Javascript/Jquery将选择列表更改为单选按钮
- 动态填充的选择列表
- jqgrid动态加载选择列表
- 使用peta poco ORM在MVC应用程序中创建选择列表
- 我正在尝试从 xhtml 文件中动态提取所有
元素,并使用 javascript 将它们放入选择列表中
- JQuery无法找到选择列表
- 我正试图动态地拉动<h3>元素,并将它们放在选择列表中
- 根据预选,用值填充选择列表
- 在PHP中将下拉选择列表的内容从一个表单传递到另一个表单
- 我已经创建了一个动态的下拉选择列表,它指向一行;如何使该行成为变量
- 允许用户订购选择列表
- 动态选择列表AJAX和插入数据库表通过张贴形式
- 使用jQuery的层次选择列表
- 如何在选择列表项时重新加载iframe