問題描述

我有一個(gè)使用 javascript 函數(shù)動態(tài)創(chuàng)建的選擇選項(xiàng).選擇對象是

I have a dynamically created select option using a javascript function. the select object is

<select name="country" id="country">
</select>

js函數(shù)執(zhí)行時(shí)，country"對象為

when the js function is executed, the "country" object is

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

并顯示印度尼西亞"作為默認(rèn)選擇選項(xiàng).注意:該選項(xiàng)中沒有 selected="selected" 屬性.

and displaying "Indonesia" as default selected option. note : there is no selected="selected" attribute in that option.

然后我需要將 selected="selected" 屬性設(shè)置為印度尼西亞"，我使用這個(gè)

then I need to set selected="selected" attribute to "Indonesia", and I use this

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

使用firebug，我可以看到印度尼西亞"選項(xiàng)是這樣的

using firebug, I can see the "Indonesia" option is like this

<option value="ID" selected="selected">Indonesia</option>

但它在 IE 中失敗(在 IE 8 中測試).

but it fails in IE (tested in IE 8).

然后我嘗試使用 jQuery

and then I have tried using jQuery

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

在 FFX 和 IE 中都失敗了.

it fails both in FFX and IE.

我需要印度尼西亞"選項(xiàng)具有 selected="selected" 屬性，因此當(dāng)我單擊重置按鈕時(shí)，它將再次選擇印度尼西亞".

I need the "Indonesia" option to have selected="selected" attribute so when I click reset button, it will select "Indonesia" again.

更改 js 函數(shù)以動態(tài)創(chuàng)建國家/地區(qū)"選項(xiàng)不是一種選擇.該解決方案必須在 FFX 和 IE 中都有效.

changing the js function to dynamically create "country" options is not an option. the solution must work both in FFX and IE.

謝謝

推薦答案

好問題.您將需要修改 HTML 本身，而不是依賴 DOM 屬性.

Good question. You will need to modify the HTML itself rather than rely on DOM properties.

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/>/, ' selected="selected">');
opt.replaceWith(html);

代碼抓取印度尼西亞的 option 元素，將其克隆并放入新的 div(不在文檔中)以檢索完整的 HTML 字符串:<option value="ID">Indonesia</選項(xiàng)>.

The code grabs the option element for Indonesia, clones it and puts it into a new div (not in the document) to retrieve the full HTML string: <option value="ID">Indonesia</option>.

然后它會進(jìn)行字符串替換以添加屬性 selected="selected" 作為字符串，然后用這個(gè)新選項(xiàng)替換原始選項(xiàng).

It then does a string replace to add the attribute selected="selected" as a string, before replacing the original option with this new one.

我在 IE7 上測試過.在這里看到重置按鈕正常工作:http://jsfiddle.net/XmW49/

I tested it on IE7. See it with the reset button working properly here: http://jsfiddle.net/XmW49/

這篇關(guān)于設(shè)置選項(xiàng)“已選擇"；來自動態(tài)創(chuàng)建選項(xiàng)的屬性的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！