Update options in select dynamically

Question

I have constructed a dynamic select using jQuery like below:

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);
    }
});

Here is my JSFiddle

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>

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

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

Any help is appreciated.

create a function and call it add page load time will solve the issue.. — Dipesh Parmar
– Dipesh Parmar, Commented Aug 31, 2013 at 5:56
in chrome it looks fine... ie may not respect hiding option eleemnt — Arun P Johny
– Arun P Johny, Commented Aug 31, 2013 at 5:56
@ArunPJohny Sorry fiddle got bounced. check this jsfiddle.net/ubVfa/1 — Praveen
– Praveen, Commented Aug 31, 2013 at 5:57
@DipeshParmar This means once again a if..else.. block during onload? The code is getting bigger. Any way to optimize it. — Praveen
– Praveen, Commented Aug 31, 2013 at 5:59
@user1671639 well you can just one line and do this...add $('#YesOrNo').trigger('change'); inside top of document.ready block — Dipesh Parmar
– Dipesh Parmar, Commented Aug 31, 2013 at 6:03

H.D. · Accepted Answer · 2013-08-31 12:34:35Z

4

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

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

See my fiddle:

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

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

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

edited Aug 31, 2013 at 12:34

answered Aug 31, 2013 at 5:59

H.D.

4,4841 gold badge21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-08-31 06:02:32Z

2

You can use trigger to manually invoke the handler on page load.... still your solution will not work in IE... see further changes below

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');

Demo: Fiddle

answered Aug 31, 2013 at 6:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Praveen Over a year ago

+1 Yes you're right. I can't figure out the reason why IE missed it out. Let me check again and get back. Thank you.

Dipesh Parmar · Accepted Answer · 2013-08-31 06:06:48Z

1

You can simply do this by triggering change event on load.

just add below code inside document.ready

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

and for test it add selected="selected" for No option and run the code.

See Demo

answered Aug 31, 2013 at 6:06

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

LoneWOLFs · Accepted Answer · 2013-08-31 06:14:19Z

0

If your code logic allows this trigger a change event once.

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

JS FIDDLE

edited Aug 31, 2013 at 6:14

answered Aug 31, 2013 at 6:01

LoneWOLFs

2,3163 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

Update options in select dynamically

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related