CODEWITHSUNDEEP
javascriptjqueryhtml
Simian
Simian

Reputation: 864

jQuery append select options - selected not working

I am building a select box by grabbing the options using ajax. I am then checking if the value of each options is the same as the current selected, and if so add the 'selected' attribute. The 'selected' attribute is being added fine but that option does not show as selected.

This is how I'm appending the options to the select..

for (var i=0; i<client_jobs.length; i++) {
    if(current_job == client_jobs[i].id){
        sel.append('<option value="' + client_jobs[i].id + '" selected="selected">' + client_jobs[i].label + '</option>');
    }else{
        sel.append('<option value="' + client_jobs[i].id + '">' + client_jobs[i].label + '</option>');  
    }   
}

The correct option is seen like this:

<option value="5" selected="selected">fifth test job</option>

But it is not actually selected, it's always the first options which is seen.

Any ideas what I'm doing wrong?

Thanks.

Upvotes: 0

Views: 3074

Answers (4)

Megha Shelke
Megha Shelke

Reputation: 1

var client_jobs = {"0": {id: "job1",label: "JOB1"},"1": {id: "job2",        label: "JOB2"}};

var current_job = "job2";
for (i in client_jobs) {

  if(current_job == client_jobs[i].id){

    $('#select').append('<option value="' + client_jobs[i].id + '" selected="selected">' + client_jobs[i].label + '</option>');

  }else{

    $('#select').append('<option value="' + client_jobs[i].id + '">' + client_jobs[i].label + '</option>');  

   } 

 }

Upvotes: 0

lshettyl
lshettyl

Reputation: 8171

Assuming your client_jobs looks like:

var client_jobs = [
    {id:0, label:"first"},
    {id:1, label:"second"},
    {id:2, label:"third"},
    {id:3, label:"fourth"}
];

and you'd like to set one of the options selections, let's say:

var current_job = 2;

You could do the following with no if etc.

var client_jobs = [
    {id:0, label:"first"},
    {id:1, label:"second"},
    {id:2, label:"third"},
    {id:3, label:"fourth"}
];
var current_job = 2;

var $options = $();
for (var i=0, len=client_jobs.length; i<len; i++) {
    $options = $options.add( $("<option/>", {
        'value': client_jobs[i].id,
        'text': client_jobs[i].label
    }) );
}
$("select").append($options).val(current_job);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

Tip: Do not append within a loop (ever!)

Hope that helps!

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

Your code works perfectly well,
Try to wrap your code into a DOM ready function

jQuery(function( $ ){ // Try to use this


  var sel = $("select");
  var current_job = 1;   // set b as selected

  var client_jobs = [
    {id:0, label:"a"},
    {id:1, label:"b"},
    {id:2, label:"c"}
  ];


  for (var i=0; i<client_jobs.length; i++) {
    var cj = client_jobs[i];
    if(current_job == cj.id){
      sel.append('<option value="' + cj.id + '" selected="selected">' + cj.label + '</option>');
    }else{
      sel.append('<option value="' + cj.id + '">' + cj.label + '</option>');  
    }   
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

P.S: try to avoid using .append() inside a for loop.
Instead, concatenate your strings and than after the loop append only once: DEMO

Upvotes: 1

Dinesh Patra
Dinesh Patra

Reputation: 1135

for (var i=0; i<client_jobs.length; i++) {
    if(current_job == client_jobs[i].id){
        var option = document.createElement("option");
        option.value = client_jobs[i].id;
        option.setAttribute("selected", "selected");
        option.appendChild(document.createTextNode(client_jobs[i].label));
        sel.append(option);
    }else{

        var option = document.createElement("option");
        option.value = client_jobs[i].id;
        option.appendChild(document.createTextNode(client_jobs[i].label));
        sel.appendChild(option);

    }   
}

Upvotes: 0

Related Questions