使用JavaScript動態設置選擇選項

如何使用Javascript動態設置我的html選擇字段中的選項？這是我的頁面設置：使用JavaScript動態設置選擇選項

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select name='inptProduct'></select></td> 
    </tr> 
    </table> 
</form>

我有一個數組中的所有值。這是設置<option>的位置。

for(var i = 0; i < productArray.length; i++) { 
    console.log("<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"); 
}

PS：可以使用jQuery。

解決方案： 這是我一直在尋找最終的解決方案。它不會將新選項應用於選擇字段。它消除了所有的第一，然後添加新的：

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString));

來源

2012-04-20 doonot

http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery – 2012-04-20 13:41:15

http：///stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-andsese – AbiusX 2015-02-20 01:27:13

wellyou幾乎做到了一切：

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$('select[name="inptProduct"]').append(optionsAsString);

編輯刪除$來包裹最後optionsAsString爲append自動轉換字符串

來源

2012-04-20 13:43:07 gotofritz

+1將再次粘貼到我的代碼庫 – vemv 2014-03-18 16:54:54

@vemv *再次* - 也許它的時間來創建一個功能，這樣做 – csharpfolk 2015-04-11 08:13:28

var $inputProduct = $("select[name='inputProduct']") 

$(productArray).each(function(i, v){ 
    $inputProduct.append($("<option>", { value: v, html: v })); 
});

來源

2012-04-20 13:42:12 hunter

這將工作 - 但一次性添加選項效率更高。如果它只是頁面中的一個下拉菜單，那不重要。 – gotofritz 2012-04-20 13:44:00

是什麼讓你覺得這不是那麼做？ – hunter 2012-04-20 13:44:31

您正在爲產品的每個成員運行.append – gotofritz 2012-04-20 13:46:44

-5

你可以設置id爲select id = inptProduct 然後做$ （「#inptProduct」）。VAL（yourselectValue）

來源

2012-04-20 13:43:10 ZERO

首先，你不需要設置id訪問節點，其次val做了一些完全不同的事情。 – gotofritz 2012-04-20 13:45:25

.val（）將設置select元素的選定值。 – Joe 2012-04-20 13:51:21

function onLoad() { 

    var type = new Array("Saab","Volvo","BMW"); 

    var $select = $("select[name='XXXXXType']") 
    alert($select); 
    $(type).each(function(i, v){ 
     $select.append($("<option>", { value: v, html: v })); 
     }); 

}

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

來源

2013-07-30 11:04:15

不適用於移動應用程序 – 2013-07-30 11:20:11

假設陣列productArray是一個簡單的陣列，其中每個元素的選項的值，並且該選項的期望的標題。

$('select[name="inptProduct"]') 
    .html('<option>' + productArray.join('</option><option>') + '</option>');

例子：

productArray = ['One', 'Two', 'Three']; 

// With the original code being 

<select name="inptProduct"> 
    <option>There could be no options here</option> 
    <option>Otherwise, any options here will be overwritten</option> 
</select> 

// Running the code above would output 

<select name="inptProduct"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select>

來源

2016-02-17 17:19:21

如果你不堅持爲純JavaScript做的工作，你可以很容易地使用jQuery做的工作。

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select id='inptProduct'></select></td> 
    </tr> 
    </table> 
</form> 


for (var i = 0; i < productArray.length; i++) { 
    $("#inptProduct").append('<option value=' + if_you_want_set_value + '>' + productArray[i] + '</option>'); 
    }

請注意，這裏我使用了select標籤的id。這就是我爲什麼要添加html部分的原因。希望你知道如何添加jQuery。

來源

2016-05-12 09:33:24

我通常不喜歡這樣：

document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>";

來源

2017-08-22 12:03:35 Radacina

使用JavaScript動態設置選擇選項

回答

相關問題