Question

enter image description here json（数据）看起来像这样伙计们！我有一点形式。像这样：

<form method="post" action="" id="ajaxform">
<input type="text" size="32" maxlength="36" name="name" placeholder="Вaшe имя" val="">
        <select id="activity_2" name="activity_2">
        <option value="">Exmaple</option>
        </select>
<input type="submit" value="GO GO GO"/>
</form>
<script src="/add-information/aa.js"></script>

在这个小代码中，我收到了一个包含我数据库数据的json：

        var data = JSON.parse(response);
        console.log(data);

在数据中有标题的id和名称。如何在我的选项列表中加载所有这些数组？我被告知做这样的事情：

var select = document.getelementById('activity_2'); // id of the select 
select.options[i] = new Option(data.id, data.od); // add data?

请帮助我，如何填写数据＆＃39;？

中的数据

ADEON的解决方案是：

var data = JSON.parse（response）; 的console.log（数据）;

    var select = document.getElementById('activity_2');

    for (var i = 0; i < data.data.length; i++) {
    select.options[select.length] = new Option(data.data[i].name_rus, data.data[i].id);
        }

Answer 1

您可以循环播放data并将选项html附加到select。

var select = document.getelementById('activity_2');
$(select).html('');
for (var i in data) {
    $(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
}

Answer 2

假设data是一个数组，你可以迭代它并像这样将它应用到DOM。

var optionString = '';
var data = ['John', 'Josh'];

data.forEach(function(dataItem, index){
  optionString += '<option value="' + index + '">' + dataItem + '</option>';
});

$('#activity_2').append(optionString);

这是一个有效的jsfiddle： https://jsfiddle.net/9ke5fzqo/

Answer 3

您应该使用add方法作为参数接受新的Option。

Option的构造函数如下所示：new Option(text,value)。

var array=[{
            "text":"text1",
            "value":"value1"
          },{
            "text":"text2",
            "value":"value2"
          }];
var select = document.getElementById('activity_2');
array.forEach(function(item){
  select.add(new Option(item.text,item.value));
});

<select id="activity_2" name="activity_2">

Answer 4

您可以在jquery中使用$ .append将新选项添加到选择输入中。 HTML：

<select id="selinput" name="activity_2"> <option value="">Exmaple</option> </select>

Jquery的：

$("#selinput").append('<option value="1">value</option>');

或者您可以使用jquery.selec2插件。

Answer 5

您需要这样做：
1）您的来电getelementById应更改为getElementById，否则您会收到错误 2）您需要先创建选项字符串然后将该字符串附加到DOM，而不是每次添加选项时都触摸DOM。从性能的角度来看，尽可能少地触摸DOM是一个好主意 3）为简化语法，您可以使用如下字符串插值语法：

var select = document.getElementById('activity_2');
//$(select).html('');
var data = [{id:1, name_rom:'a', name_rus:'abc'},{id:2, name_rom:'x', name_rus:'xyz'}];
var options = "";
for (var i = 0; i < data.length; i++) {
  options += `<option value=${data[i].id}>${data[i].name_rus}</option>`;//<--string 
                                                             //interpolation
}
$(select).append(options);
//OR below, so you don't need to call document.getElementById
//$('#activity_2').append(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" id="ajaxform">
  <input type="text" size="32" maxlength="36" name="name" placeholder="Вaшe имя" val="">
  <select id="activity_2" name="activity_2">
        <option value="">Exmaple</option>
  </select>

jquery如何在我的表单中填写选择选项

5 个答案: