Appending options in select box using jquery

user_8852567 0
Viewed 5511

Current Code: I am using click event to append options to select box.

Issue: It's adding as object.

Help to resolve the issue. I have given below code: 

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>

jquery javascript
6 Answers

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>

It's because you are getting values as { "cat": "test 1","name": "ram"} and {"cat": "test 1","name": "ram"}, in iteration, so while making it to string it shows [object Object] get name or cat value then assign it.

You're trying to get each item's information just like you do with a PHP array. In JavaScript this is an array of objects, and the properties of these objects can be accessed as object.property.

user_35517860

You try this code: JSfiddle

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

Try this.

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>

user_80243540

This line:

.text(value));

should probably be:

.text(value.name));

(or perhaps .text(value.cat)) depending on your requirements)

The reason your current code doesn't work is that you are trying to populate each <option> with an entire json object, e.g. { "cat": "test 1", "name": "ram"}.

user_3150450

Pure js approach

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>

user_39701170

try this:

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

user_89565840
Related