Home/ Questions/Q 1075155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T21:14:04+00:00

This was interesting. In a select dropdown, trying not to use jQuery (with the

  • 0

This was interesting. In a select dropdown, trying not to use jQuery (with the exception of easing some of my pain on recreation), I ran into an issue that doesn’t properly let any current browsers catch the proper selected option. Here is my code, for the page that recreates the issue (remember, no jQuery to necessarily solve issue, but more or less just telling me what I am doing wrong.

This one has me stumped.

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div id="select-holder" />
<input id="some-button" type="button">

<script type="text/javascript">

$("#some-button").click(function(){

    var select_element = document.createElement('select');
    select_element.setAttribute("id", "some-id");
    select_element.setAttribute("name", "some-name");

    var options = new Array();
    for ( var i = 0; i < 3; i++ ){
        options.push(new Option("Option " + i, "Value" + i, false, false));
    }
    options[1].setAttribute("selected", "selected");

    for ( var option in options ){
        select_element.appendChild(options[option]);
    }

    $("#select-holder").append(select_element);
});

</script>
</body>
</html>

The html this creates is:

    <select id="some-id" name="some-name">
    <option value="Value0">Option 0</option>
    <option value="Value1" selected="selected">Option 1</option>
    <option value="Value2">Option 2</option>
</select>

But the anomaly here is that (in firefox at least), the selected option ends up being Option 0, which isn’t the selected DOM element. In IE6, this select dropdown doesn’t work at all.

There is an alternate method that does work, which includes piecing the options together manually, which works in all browsers that I have tested.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A small change made it work for me in Firefox:

    ...
//options[1].setAttribute("selected", "selected");
options[1].selected = true;
...

    I’m manipulating the DOM element’s attributes directly. Not sure why your method doesn’t work. Maybe you should keep both lines so that the HTML generated has the selected = "selected" in it.

    • 0