动态更新选择中的选项 [英] Update options in select dynamically

问题描述

我使用 jQuery 构建了一个 动态 select ，如下所示:

I have constructed a dynamic select using jQuery like below:

基于YesOrNo，我必须在Source 和输入

Based on YesOrNo, I have to show/hide options in Source and 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 中显示 selected 选项时出现问题.

This is working perfect as I expected. Since the values are obtained from database, I have a problem while displaying the selected option in 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 个选项.

Here the option "Yes" is selected by default, but here http://jsfiddle.net/ubVfa/1/ still showing the four options and Type showing all 7 options.

Yes/No                            Source               Type
--------------------------------------------------------------------
Yes(SELECTED by default)          All 4 options        All 7 Options

如何调整我的代码以动态更新 select 中的选项.

How to tune my code to update the options in select dynamically.

感谢任何帮助.

推荐答案

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

You can call $("...").change() after the page is loaded:

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

见我的小提琴:

当没有选择任何东西时，我也隐藏了选项，在onchange"事件处理程序中调用 $("...").hide().

I also hid the options when nothing is selected, calling $("...").hide() in the "onchange" event handler.

带有 func 作为匿名函数的 $(func) 是 $(document).ready(func) 的语法建议，在加载后调用给定的函数.

The $(func) with func as an anonymous function is a syntatic suggar for $(document).ready(func), which calls that given function after loading.

change"调用只是一个触发器调用，比如$("...").trigger("change").

The "change" call is just a trigger call, like $("...").trigger("change").

这篇关于动态更新选择中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！