如何更改 mvc 4 中的动态下拉项(它不是 casecaddind 下拉列表)
How to change Dynamic Dropdown items in mvc 4(It not a casecaddind dropdown)
我的视图页面中有 3 个下拉菜单。 @HTML.Dropdownlistfor()。我的下拉项在数据库中。
The dropdown items are :
id name
0 SELECT
1 A
2 B
3 C
我的要求是:
1)当我的第一个下拉菜单选择的值为( A )时,然后第二个和第三个下拉菜单只显示(SELECT , B ,C).
2)现在我的第一个下拉菜单将选定值(A)更改为(SELECT),然后第二个下拉菜单显示((SELECT,A,B,C)。
如何实现这个概念。
你需要什么,只需在第一个下拉菜单上绑定一个 change
事件并检查条件是否值不是 select 然后从第二个下拉菜单中隐藏该特定项目否则显示所有隐藏的第二个下拉列表中的选项。
$('#dd1').change(function() { // change event bound on first dropdown
var index = $(this).find(':selected').index(); // get the index here
if (this.value !== 'select') { // check if the value is not 'select'
$('#dd2').find('option:hidden').show();
$('#dd2').find('option:eq('+index+')').hide();
// get the selected option index and hide it.
} else {
$('#dd2').find('option:hidden').show();
// if the value is select then show the hidden option.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dd1'>
<option>select</option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
<select id='dd2'>
<option>select</option>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
<option value='baz'>Baz</option>
</select>
我的视图页面中有 3 个下拉菜单。 @HTML.Dropdownlistfor()。我的下拉项在数据库中。
The dropdown items are :
id name
0 SELECT
1 A
2 B
3 C
我的要求是:
1)当我的第一个下拉菜单选择的值为( A )时,然后第二个和第三个下拉菜单只显示(SELECT , B ,C).
2)现在我的第一个下拉菜单将选定值(A)更改为(SELECT),然后第二个下拉菜单显示((SELECT,A,B,C)。
如何实现这个概念。
你需要什么,只需在第一个下拉菜单上绑定一个 change
事件并检查条件是否值不是 select 然后从第二个下拉菜单中隐藏该特定项目否则显示所有隐藏的第二个下拉列表中的选项。
$('#dd1').change(function() { // change event bound on first dropdown
var index = $(this).find(':selected').index(); // get the index here
if (this.value !== 'select') { // check if the value is not 'select'
$('#dd2').find('option:hidden').show();
$('#dd2').find('option:eq('+index+')').hide();
// get the selected option index and hide it.
} else {
$('#dd2').find('option:hidden').show();
// if the value is select then show the hidden option.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dd1'>
<option>select</option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
<select id='dd2'>
<option>select</option>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
<option value='baz'>Baz</option>
</select>