将选项添加到动态加载的选择

问题描述：

将<option>...</option>添加到已动态添加到DOM的选择的最佳方式是哪种？将选项添加到动态加载的选择

我的意思是在一个通用的<select>，随后添加了ajax调用。我想在显示select元素之前添加选项。

谢谢！

编辑

这是函数，我有

$.ajax({ 
    type: "get", 
    url: baseUrl + 'MyService.asmx/NewReferent', 
    data: JSON.stringify({}), 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (msg) { 
     // Get the referent item from the webservice 
     var referent = msg.d; 
     // Render the template with the Referent data 
     var referentTemplate = $("#referentTemplate").tmpl(referent); 
     //add button style 
     $(".button", referentTemplate).button(); 
     //Show the Dialog 
     $("#referent-dialog").empty().html(referentTemplate).dialog('open'); 
    } 
});

这是我必须从服务器获取的选项的代码

$.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) { 
    $.each(data, function (key, value) { 
     $('#select_id').append($("<option></option>").attr("value", key).text(value)); 
    }); 
});

EDIT 2

不幸的是我无法理解我的代码是怎么回事。对于一些小的修改，以@Raynos的代码我已经能够从没有从我的$.each()函数调用正确的解析服务器

{"d": 
    [ 
     {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":1,"Description":"option1"}, 
     {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":2,"Description":"option2"} 
    ] 
}

收到以下JSON数据。我现在有两个问题：

谁将添加_type参数？
如何纠正解析each()？

答

$("<select>").append(
    $("<option>" , { 
     text: "foo", 
     value: "bar" 
    }) 
).appendTo("#container");

关键是你选择追加到某件事之前要追加的选项。

或者，您可以确保在将选择添加到DOM之前隐藏该选择。

伪代码：

$.when(ajax).then(function(html) { 
    var foo = $(html); 
    foo.find("select.SomeClass").hide(); 
    ... 
}); 

... 

$("select.SomeClass").append($("<option>")).show()

[编辑]

使用的$.when魔法简单一点，以确保他们在写顺序发生。即选择创建模板，则选择附加

$.when(
    $.ajax({ 
     type: "get", 
     url: baseUrl + 'MyService.asmx/NewReferent', 
     data: JSON.stringify({}), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      // Get the referent item from the webservice 
      var referent = msg.d; 
      // Render the template with the Referent data 
      var referentTemplate = $("#referentTemplate").tmpl(referent); 
      //add button style 
      $(".button", referentTemplate).button(); 
      //Show the Dialog 
      $("#referent-dialog").empty().html(referentTemplate).dialog('open'); 
     } 
    }); 
}).then(function() { 
    $.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) { 
     $.each(data, function (key, value) { 
      $('#select_id').append($("<option></option>").attr("value", key).text(value)); 
     }); 
    }); 
});

[编辑2]

给你的样品JSON结构

$.each(data.d, function (key, value) { 
    $('#select_id').append(
     $("<option></option>") 
      .attr("value", value.ReferentTypeID) 
      .text(value.Description) 
    ); 
});

会产生

<option value="0">option1</option> 
<option value="1">option2</option>

问题是我有一堆从ajax调用返回的标记，这里有我的选择。我必须在对话框中显示标记，在此之前我必须添加选项。在这种情况下我该怎么办？ – Lorenzo 2011-05-09 21:39:46

@Lorenzo你想在添加选项之前不显示空的选择框？ – Raynos 2011-05-09 21:49:00

@Raynos可以展示它。我只是困惑在哪里插入我的代码。请查看我的问题编辑了解详情。 – Lorenzo 2011-05-09 22:02:20

答

这个简单的答案可能对你有所帮助，

var selectField = $('#' + id_of_field); 
var empIds = [101, 102, 103]; 
var empNames = ['X', 'Y', 'Z']; 
var options = ''; 
selectField.empty(); 
for (var i = 0, len = empIds.length; i < len; i++) { 
    options += '<option value="' + empIds[i] + '">' + empNames[i] + '</option>'; 
} 
selectField.append(options);

将选项添加到动态加载的选择

相关推荐