Question

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

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

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

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

这一行：

.text(value));

应该是：

.text(value.name));

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

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

Answer 4

试试这个。

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 5

纯粹的js方法

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

6 个答案: