[英]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
显示所选选项时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)
的语法暗示,在加载后调用该给定函数。
“ change”调用只是一个触发器调用,例如$("...").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');
演示: 小提琴
您只需在load
触发 change event
即可完成此操作。
只需在document.ready
添加以下代码
$('#YesOrNo').trigger('change');
为了进行测试,请为No选项添加selected="selected"
并运行代码。
如果您的代码逻辑允许此事件触发一次更改事件。
//Triggering a change event on document ready
$(document).ready(function(){
$('#YesOrNo').trigger('change');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.