在下拉菜单中设置选项值

Question

I am attempting to set an option in a dropdown/select. I have done this before, but for some reason I am getting an error and I am not sure why.

Code

var _loc = {
        ALL_BUYS: [{ Text: "All Buys", Value: "AAA"}],
        NETWORK_BREAK: [{ Text: "Network Break", Value: "NTN"}],
        SYNDICATED_BREAK: [{ Text: "Syndicated Break", Value: "STA"}],
        LOCAL_BREAK: [{ Text: "Local Break", Value: "LTA"}],
        NATIONAL_LOCAL: [{ Text: "National/Local", Value: "LTN"}],
        LOCAL_LOCAL: [{ Text: "Local/Local", Value: "LTL"}]//,
    };

lstOptions = $("<select></select>");

$.each(_loc, function (i, item)
    {
        $("<option></option>")
            .appendTo(lstOptions)
            .html(item.Text)
            .val(item.Value) // receive error: Object  has no method 'val'
        });

Answer 1

You're not grabbing the values from the object correctly.

The format is like so:

{key1:[{0, 1}], key2:[{0, 1}], key3:[{0, 1}]}

When you use $.each , it selects each one in this state:

[{0, 1}]

On the first iteration, it would select the value associated with key1, on the second, key2, etc.

Since you have arrays nested in each key's value, you need to specify that it locate the first array in the matched value:

var _loc = {
    ALL_BUYS: [{ Text: "All Buys", Value: "AAA"}],
    NETWORK_BREAK: [{ Text: "Network Break", Value: "NTN"}],
    SYNDICATED_BREAK: [{ Text: "Syndicated Break", Value: "STA"}],
    LOCAL_BREAK: [{ Text: "Local Break", Value: "LTA"}],
    NATIONAL_LOCAL: [{ Text: "National/Local", Value: "LTN"}],
    LOCAL_LOCAL: [{ Text: "Local/Local", Value: "LTL"}]
};

lstOptions = $("select");

$.each(_loc, function(i, item){
    $("<option></option>")
        .appendTo(lstOptions)
        .html(item[0].Text)
        .attr("value", item[0].Value);
});​

Demo .

Note the item[0] . What this does is select the array with the index 0 in the value that it grabbed. Since there is only one, that single array's index is 0 , so it's selecting that specific one. Then you find and set its text and value.

Also note that I changed val() to attr() , because option elements don't support val() (you could, however, use it on a select element to set the option whose value is equal to the one specified in this function to make it selected).

TIP: You could also get rid of the literal array indicators around each nested object and use the original method. Demo .

Answer 2

<option> elements do not support val() . I think you want to use attr()

.attr("value", item.Value)

Answer 3

.val() is used to get the value of form elements. It is not a short-cut to setting the value attribute of an element. To do this, you can use:

.attr("value", item.Value)

Answer 4

Figured it out. I want my items in the loop to be in the following format

Item: "All Buys"
Value: "AAA"

Instead they were in this format

[0]Option
  Item: "All Buys"
  Value: "AAA"

If I change my loop to this it works

$.each(_loc, function (i, item)
{
     $("<option></option>")
           .appendTo(lstOptions)
           .html(item[0].Text)
           .val(item[0].Value);
});