jQuery追加选择选项-选择不起作用

Question

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.

Answer 1

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> 

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

Answer 2

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!

Answer 3

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

    }   
}

Answer 4

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

   } 

 }