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

时间:2015-06-10 09:36:56

标签: javascript jquery html

我正在使用ajax抓取选项来构建一个选择框。然后我检查每个选项的值是否与当前选择的值相同,如果是,则添加'selected'属性。 'selected'属性正在添加正常,但该选项未显示为已选中。

这就是我将选项附加到选择..

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

正确的选项如下所示:

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

但它实际上并未被选中,它始终是第一个可见的选项。

任何想法我做错了什么?

感谢。

4 个答案:

答案 0 :(得分:1)

您的代码运作良好,
尝试将代码包装到DOM就绪函数

&#13;
&#13;
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>');  
    }   
  }

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

P.S:尽量避免在for循环中使用.append() 相反,连接你的字符串,而不是在循环只追加一次后: DEMO

答案 1 :(得分:1)

假设您的client_jobs看起来像:

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

并且您想要设置其中一个选项,让我们说:

var current_job = 2;

如果没有if等,您可以执行以下操作。

&#13;
&#13;
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);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
&#13;
&#13;
&#13;

提示:不要追加循环(永远!)

希望有所帮助!

答案 2 :(得分:0)

wc.Widgets.Create()

答案 3 :(得分:0)

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

   } 

 }
相关问题