1

I'm programmatically changing the option children of a select element with jQuery.

The changes are being applied to the DOM, but are not visible on the screen.

This is what I get on the screen:

Combo box with 4 options

And this is what I see when I inspect the select element:

Html select with 5 option children

Here is the code that I use to update the select element:

    select.empty();
    $.each(this.entries, function() {
        var option = $$("<option/>");
        option.attr("value", this.value);
        option.text(this.label);
        select.append(option);
    });

This clearly seems like a bug to me. Can anybody tell me what is wrong with this or indicate a workaround ?

Note: for reasons beyond my control, the page is in quirks mode.

4

2 に答える 2

2

The documentation for the SelectElement is here: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement

You can add options like this:

$("#sel")[0].options.add(new Option("test", "123")); //haven't tested all browsers

The docs say that you call add on the select element itself, passing in an option node:

$("#sel")[0].add($("<option>").val("456").prop("text", "Test2")[0], null);

both tested (and working) in IE8 here: http://jsfiddle.net/82gCq/2/

Note — The docs for HTMLOptionsCollection does not specify an add method, so it is not standardized, and its implementation will be left to the browser (if they implement it at all).

The good news is that $("#sel")[0].add(new Option("test3", "789")); works in IE8, and should work in other browsers as well.

于 2013-01-08T21:40:16.520 に答える
0

Try changing 

var option = $$("<option/>");

to

var option = $("<option></option>");

I removed the double dollar sign (I believe that was a typo), and changed the option element to not use the self-closing syntax. I've run into issues using self-closing tags on certain elements (script,textarea,iframe), this could be another example of where a self-closing tag could be a problem.

于 2013-01-08T21:38:57.687 に答える