Javascript change dropdown list value

Question

$('a#noday').click(function()
{ for(g=1;g<=10;g++)
var ddl = document.getElementById('daySelect_'+g);
var opts = ddl.options.length;
for (var i=0; i<opts; i++){
    if (ddl.options[i].value == ""){
        ddl.options[i].selected = true;
        break;
    }
})

$('a#wed').click(function()
{ for(g=1;g<=10;g++)
var ddl = document.getElementById('daySelect_'+g);
var opts = ddl.options.length;
for (var i=0; i<opts; i++){
    if (ddl.options[i].value == "wed"){
        ddl.options[i].selected = true;
        break;
    }
})

Below is my select html code

<select class="form-control daySelect" id="daySelect_1" name="daySelect_1">
<option value="">Select</option>
<option value="wed">Wed</option>
<option value="sat">Sat</option>
<option value="sun">Sun</option>
<option value="satsun">Sat/Sun</option>
<option value="wedsatsun">WedSatSun</option>
</select>

Below is my hyperlink html

Set all to: 
<a id="noday" href="#"><span class="label label-info">No Day</span></a>&nbsp; 
<a id="wed" href="#"><span class="label label-info">Wednesday</span></a>&nbsp;

I tried to click the hyperlink, but my dropdownlist selected does not change. I did try the alert to make sure my link work, and it manage to execute alert.

My JsFiddle

Have you tried $('#wed')instead of $('a#wed')? Because the id must be always unique on the page. — Reporter
– Reporter, Commented Aug 28, 2014 at 8:58
@Exception , sorry I did wrap inside document.ready , just din't paste it here — user3412075
– user3412075, Commented Aug 28, 2014 at 8:59
@reporter, i added jsFiddle to display my issue, tried your #wed instead of a#wed and it seems problem still persist. — user3412075
– user3412075, Commented Aug 28, 2014 at 9:01

CodingIntrigue · Accepted Answer · 2014-08-28 09:03:59Z

2

A few things. You are missing a lot of braces, you would have noticed errors in your console. You also assumed that daySelect_ 1 through 10 existed, according to your Fiddle they might not.

$('a#noday').click(function() {
    for (g = 1; g <= 10; g++) { // This was missing
        var ddl = document.getElementById('daySelect_' + g);
        if (!ddl) continue; // What if there is no daySelect_10?
        var opts = ddl.options.length;
        for (var i = 0; i < opts; i++) {
            if (ddl.options[i].value == "") {
                ddl.options[i].selected = true;
                break;
            }
        } // Missing this brace too
    }
});

$('a#wed').click(function() {
    for (g = 1; g <= 10; g++) {
        var ddl = document.getElementById('daySelect_' + g);
        if (!ddl) continue;
        var opts = ddl.options.length;
        for (var i = 0; i < opts; i++) {
            if (ddl.options[i].value == "wed") {
                ddl.options[i].selected = true;
                break;
            }
        }
    }
});

Updated jsFiddle

Lastly, you might want to think about using jQuery for all of this, rather than just the DOM events. It will save you having to do so many nested for loops, for example:

$('a#noday').click(function() {
    $("[id^=daySelect_").val("");
});

$('a#wed').click(function() {
    $("[id^=daySelect_").val("wed");
});

Much neater! jsFiddle

answered Aug 28, 2014 at 9:03

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

2 Comments

user3412075 Over a year ago

I tried your jsfiddle but it seem not working, when I click on the hyperlink, the dropdown selected does not change

CodingIntrigue Over a year ago

@user3412075 Don't know what to say - definitely works for me! What about the jQuery fiddle?

Manu Singh · Accepted Answer · 2014-08-28 09:06:47Z

1

why to write for loop, same can be achieved by a single line statement :)

      $("#daySelect_1").val("wed");

answered Aug 28, 2014 at 9:06

Manu Singh

4144 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript change dropdown list value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related