Динамически установить опции выбора с помощью JavaScript

Как я могу динамически устанавливать параметры из поля выбора html с помощью Javascript? Это моя настройка страницы:

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

У меня есть все значения в массиве. Это местоположение для установки <option> s.

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

PS: можно использовать jQuery.

Решение: Это окончательное решение, которое я искал. Он не применяет новые параметры к полю select. Сначала он удаляет все, а затем добавляет новые:

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));

Ответы

Ответ 1

wellyou почти все это сделал:

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

EDIT удалил $wrapper вокруг последнего optionsAsString, поскольку append автоматически преобразует строки

Ответ 2

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

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

Ответ 3

Предполагая, что массив 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>

Ответ 4

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>

Ответ 5

Если вы не настаиваете на том, чтобы чистый 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. Поэтому я также добавляю html-часть. Надеюсь, вы знаете, как добавить jQuery.

Ответ 6

Обычно я делаю это так:

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

Ответ 7

вы можете установить id для выбора id = inptProduct Затем сделайте $('# inptProduct'). Val (yourselectValue)