使用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); }); });