动态更新select中的选项
Update options in select dynamically
我使用jQuery
构建了动态select
,如下所示:
基于YesOrNo
,我必须在Source
和Type
中显示/隐藏选项
Yes/No Source Type
---------------------------------------------
Yes Yes1 and Yes2 Yes
No No1 and No2 No1 to 6
HTML:
<select id="YesOrNo" name='YesOrNo'>
<option value=''>Select Yes/No</option>
<option value='1'>Yes</option>
<option value='2'>No</option>
</select>
<select id='Source' name='Source'>
<option value=''>Select Source</option>
<option data-aob='Yes' value='1'>Yes1</option>
<option data-aob='Yes' value='2'>Yes2</option>
<option data-aob='No' value='3'>No1</option>
<option data-aob='No' value='4'>No2</option>
</select>
<select id="Type" name='Type'>
<option value=''>Select Type</option>
<option data-aob='No' value='1'>No1</option>
<option data-aob='No' value='2'>No2</option>
<option data-aob='No' value='3'>No3</option>
<option data-aob='No' value='4'>No4</option>
<option data-aob='Yes' value='5'>Yes</option>
<option data-aob='No' value='6'>No5</option>
<option data-aob='No' value='7'>No6</option>
</select>
JQuery:
$('#YesOrNo').on('change', function () {
if (this.value === '1') {
$('#Source option[data-aob=Yes]').show();
$('#Source option[data-aob=No]').hide();
$('#Type option[data-aob=Yes]').show();
$('#Type option[data-aob=No]').hide();
$("#Source option:selected").prop("selected", false);
$("#Type option:selected").prop("selected", false);
} else if (this.value === "2") {
$('#Source option[data-aob=Yes]').hide();
$('#Source option[data-aob=No]').show();
$('#Type option[data-aob=Yes]').hide();
$('#Type option[data-aob=No]').show();
$("#Source option:selected").prop("selected", false);
$("#Type option:selected").prop("selected", false);
} else {
$('#Source option').show();
$('#Type option').show();
$("#Source option:selected").prop("selected", false);
$("#Type option:selected").prop("selected", false);
}
});
这是我的JSFiddle
正如我所期望的那样,这是完美的。由于这些值是从数据库中获得的,所以在YesOrNo
中显示所选选项时出现问题。
<select id="YesOrNo" name='YesOrNo'>
<option value=''>Select Yes/No</option>
<option selected value='1'>Yes</option>
<option value='2'>No</option>
</select>
此处默认选择选项"是",但此处http://jsfiddle.net/ubVfa/1/仍显示四个选项,Type
显示所有7个选项。
Yes/No Source Type
--------------------------------------------------------------------
Yes(SELECTED by default) All 4 options All 7 Options
如何调整我的代码以动态更新select
中的选项。
感谢您的帮助。
页面加载后可以调用$("...").change()
:
$(function(){
$('#YesOrNo').change();
});
看看我的小提琴:
当没有选择任何选项时,我也隐藏了这些选项,在"onchange"事件处理程序中调用$("...").hide()
。
func
作为匿名函数的$(func)
是$(document).ready(func)
的语法后缀,它在加载后调用给定的函数。
"更改"调用只是一个触发器调用,就像$("...").trigger("change")
一样。
您可以在页面加载时使用触发器手动调用处理程序。。。。您的解决方案仍然无法在IE中工作…请参阅下面的进一步更改
var sourceHtml = $('#Source').html();
var typeHtml = $('#Type').html();
$('#YesOrNo').on('change', function () {
var sources = $(sourceHtml);
var types = $(typeHtml);
var aob = $(this).find('option:selected').data('aob');
if(aob){
sources = sources.filter('[data-aob="' + aob + '"]');
types = types.filter('[data-aob="' + aob + '"]');
}
$('#Source').empty().append(sources)
$('#Type').empty().append(types)
}).triggerHandler('change');
演示:Fiddle
您只需在load
上触发change event
即可完成此操作。
只需在document.ready
中添加以下代码
$('#YesOrNo').trigger('change');
为了测试,它为No选项添加CCD_ 18并运行代码。
请参阅演示
如果您的代码逻辑允许,则触发一次更改事件。
//Triggering a change event on document ready
$(document).ready(function(){
$('#YesOrNo').trigger('change');
});
JS FIDDLE
相关文章:
- 无法在Ionic select中预先选择最后一个选项
- 根据select选项元素将表单重定向到不同的URL
- jQuery动态表单显示在select选项上
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 如何在触发事件后选择select选项
- 当使用select作为标签时,如何使用ng选项禁用angularjs中的选项
- 如何在Javascript中从select标记的一系列选项中构建二维数组
- jQuery:根据select选项中的每页项目进行分页
- Angularjs-设置不带ng选项的select的默认值
- HTML SELECT-使用JavaScript按VALUE更改所选选项
- 需要将select标记选项值传递给ajax函数
- 单击select'时将数组行回显到文本区域中;s选项
- 使用JavaScript删除多个select选项
- 使用select选项转换时间.使用javascript
- 如何在选项select上使用jquery自动完成进行回发
- 为选项select设置多个值,并使用jQuery获取这些值
- AngularJS的默认选项select在IE9中不起作用
- 修改选项(select)元素的值
- Jquery选择器抛出选项(select)错误
- 在AngularJS中使用ng选项和选项select