1

我使用如下方式构建了一个动态：selectjQuery

基于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>

查询：

$('#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动态更新选项。

任何帮助表示赞赏。

4

4 回答 4

4

您可以$("...").change()在页面加载后调用：

$(function(){
    $('#YesOrNo').change();
});

看我的小提琴：

当没有选择任何内容时，我还隐藏了选项，调用$("...").hide()“onchange”事件处理程序。

$(func)withfunc作为匿名函数是 的语法糖，$(document).ready(func)它在加载后调用给定的函数。

“更改”调用只是一个触发调用，例如$("...").trigger("change").

于 2013-08-31T05:59:26.967 回答
2

您可以使用触发器在页面加载时手动调用处理程序....您的解决方案仍然无法在 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');

演示：小提琴

于 2013-08-31T06:02:32.173 回答
1

您可以通过触发 change event来简单地做到这一点load。

只需在里面添加下面的代码document.ready

$('#YesOrNo').trigger('change');

并为测试添加selected="selected"No 选项并运行代码。

看演示

于 2013-08-31T06:06:48.927 回答
0

如果您的代码逻辑允许这触发一次更改事件。

//Triggering a change event on document ready
$(document).ready(function(){    
    $('#YesOrNo').trigger('change');
});

JS小提琴

于 2013-08-31T06:01:41.180 回答