使用jquery在选择框中添加选项

Question

当前代码：我使用click事件将选项附加到选择框。

问题：它正在添加为对象。

帮助解决问题。 我给出了以下代码：

 var selectValues = [{ "cat": "test 1", "name": "ram" }, { "cat": "test 2", "name": "mothukuri" }]; $(".appendoptions").click(function() { $.each(selectValues, function(key, value) { $('.supervisoronly') .append($("<option></option>") .attr("value", key) .text(value)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="appendoptions"> Add </button> <select class="form-control supervisoronly" ></select> 

Answer 1

 var selectValues = [{ "cat": "test 1", "name": "ram" }, { "cat": "test 2", "name": "mothukuri" }]; $(".appendoptions").click(function() { alert("alert"); $.each(selectValues, function(key, value) { $('.supervisoronly') .append($("<option></option>") .attr("value", value.name) .text(value.name)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="appendoptions"> Add </button> <select class="form-control supervisoronly" ></select> 

这是因为你在迭代中得到{ "cat": "test 1","name": "ram"}和{"cat": "test 1","name": "ram"} ，所以使它成为字符串它显示[object Object]获取name or cat值然后分配它。

您正在尝试获取每个项目的信息，就像使用PHP数组一样。 在JavaScript中，这是一个对象数组，这些对象的属性可以作为object.property进行访问。

Answer 2

你试试这个代码： JSfiddle

$('.supervisoronly').append($("<option></option>").attr("value", key).text(value.name));

Answer 3

尝试这个。

 var selectValues = [{ "cat": "test 1", "name": "ram" }, { "cat": "test 2", "name": "mothukuri" }]; $(".appendoptions").click(function() { alert("alert"); $.each(selectValues, function(key, value) { $('.supervisoronly') .append($('<option></option>').val(key).text(value.name)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="appendoptions"> Add </button> <select class="form-control supervisoronly" ></select> 

Answer 4

这一行：

.text(value));

应该是：

.text(value.name));

（或者.text(value.cat))具体取决于您的要求）

您当前代码不起作用的原因是您尝试使用整个json对象填充每个<option> ，例如{ "cat": "test 1", "name": "ram"} 。

Answer 5

纯粹的js方法

 var selectValues = [{ "cat": "test 1", "name": "ram" }, { "cat": "test 2", "name": "mothukuri" }]; for (var i = 0; i < selectValues.length; i++) { var node = document.createElement("option"); node.value = selectValues[i]["cat"] var textnode = document.createTextNode(selectValues[i]["name"]); node.appendChild(textnode); document.getElementById("dropdown").appendChild(node); } 

 <select id="dropdown"> </select> 

Answer 6

尝试这个：

 var selectValues = [{ "cat": "test 1", "name": "ram" }, { "cat": "test 2", "name": "mothukuri" }]; $(".appendoptions").click(function() { var _value = null; $.each(selectValues, function(key, value) { _value += '<option value="' + key + '">'+ value +'</option>'; $('.supervisoronly').append(_value); }); });