Как я могу задать массив в качестве параметров для выбора элемента?

У меня есть элемент select на моей HTML-странице. Я хочу заполнить его массивом. так как мы можем дать массив как dataprovider для comboBox в действии script. Я делаю следующее

в HTML...

<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>

в javascript...

var videoSrcArr = new Array("option1", "option2", "option3", "option4", "option5");

как я могу заполнить элемент rec_mode, когда страница загружена с помощью VideoSrcArr? Благодаря

Ответы

Ответ 1

Я очень рекомендую использовать формат, подобный следующему:

var options =
[
  {
    "text"  : "Option 1",
    "value" : "Value 1"
  },
  {
    "text"     : "Option 2",
    "value"    : "Value 2",
    "selected" : true
  },
  {
    "text"  : "Option 3",
    "value" : "Value 3"
  }
];

var selectBox = document.getElementById('rec_mode');

for(var i = 0, l = options.length; i < l; i++){
  var option = options[i];
  selectBox.options.add( new Option(option.text, option.value, option.selected) );
}

Вы не столкнулись с проблемой выбора опции по умолчанию, и вы можете легко генерировать массив параметров динамически.

- ОБНОВЛЕНИЕ -

Версия ES6 приведенного выше кода:

let optionList = document.getElementById('rec_mode').options;
let options = [
  {
    text: 'Option 1',
    value: 'Value 1'
  },
  {
    text: 'Option 2',
    value: 'Value 2',
    selected: true
  },
  {
    text: 'Option 3',
    value: 'Value 3'
  }
];

options.forEach(option =>
  optionList.add(
    new Option(option.text, option.value, option.selected)
  )
);

Ответ 2

Я бы рекомендовал использовать объект вместо массива, он будет очень полезным и уважительным образом со стандартами. Причина в том, что мы можем индексировать объект "ключом" и получать "значение". Чтобы отобразить содержимое и сбросить их, вы можете следовать этому ПРИМЕЧАНИЯ

ПРОВЕРЬТЕ ЗДЕСЬ

<!DOCTYPE html>
<html>
<body>
<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>
</body>
<script>
var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

</script>
</html>

Ответ 3

Это самый простой способ заполнить comboBox массивом.

var j = new Array("option1","option2","option3","option4","option5"),    
var options = '';

for (var i = 0; i < j.length; i++) {
   options += '<option value="' + j[i]+ '">' + j[i] + '</option>';
}
$("#rec_mode").html(options);

Ответ 4

Вы можете сделать это:

var videoSrcArr = new Array("option1","option2","option3","option4","option5"),
    selectEl = document.getElementById('rec_mode');


for(var i = 0; i < videoSrcArr.length; i++){
    selectEl.options.add(new Option(videoSrcArr[i], videoSrcArr[i]));
}

Ответ 5

Это лучший способ получить значения массива в поле со списком

var states = new Array();
states['India'] = new Array('Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jammu and Kashmir','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','WestBengal','Andaman and Nicobar Islands','Chandigarh','Dadra and Nagar Haveli','Daman and Diu','Lakshadweep','Puducherry'); 

function setStates() {
	var newOptions=states['India'];
	var newValues=states['India'];
	selectField = document.getElementById("state");
	selectField.options.length = 0;
	for (i=0; i<newOptions.length; i++) 
	{
	selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
	}
}

<body  onload="setStates();"
<label>State :</label>
<select style="width:auto;" name="state" id="state">
<option value="">Please select a Country</option>
</select><br>