CODEWITHSUNDEEP
javascriptjquery
ramu
ramu

Reputation: 563

Appending options in select box using jquery

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>

Upvotes: 4

Views: 8880

Answers (6)

Durga
Durga

Reputation: 15614

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.

Upvotes: 6

Rachel.C
Rachel.C

Reputation: 5

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

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

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>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

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>

Upvotes: 3

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

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"}.

Upvotes: 1

Nobita
Nobita

Reputation: 330

You try this code: JSfiddle

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

Upvotes: 2

Related Questions