Question

通常如果我需要使用jquery动态创建新的UI元素，我只需创建一个HTML字符串并使用.appendTo（）方法将其附加到元素。

例如：

var i=0;
for (i=0;i<=5;i++)
{
  $('<div id="box" + i><h1>Test</h1><p>This is a test</p></div>').appendTo('#Wrapper');
}

但是，在这种情况下，我需要创建一个下拉选择列表作为UI的一部分，该列表绑定到服务器使用jquery ajax（）方法提供的值。

$('<div id="box" + i><h1>Test</h1><select>[The items must be created by an AJAX call to the server ]</select></div>').appendTo('#Box');

这是执行此操作以调用ajax（）方法并在将它们解析为字符串然后附加字符串之前创建项数组的最佳方法吗？

或者有更复杂的方法吗？

Answer 1

这是我的一个项目的一个例子。它应该是非常自我解释的，但欢迎您提出任何问题。

var data;
var $cities = $("#cities");
$.ajax({
    type: "POST",
    url: "/umbraco/webservices/Helpers.asmx/getcities",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        data = jQuery.parseJSON(msg.d);
        $cities.empty();
        var $defaultOption = $("<option />").val("").text("Choose");
        $cities.append($defaultOption);
        $.each(data, function(key, value) {
            var $city = $("<option />").val(key).text(key);
            $cities.append($city);
        });
    }
});

Answer 2

我通常会在页面上创建一个具有给定ID的选择框，然后通过删除列表中的所有项目并使用如下代码替换它来操纵该选择框的元素;

$("#selectBox option").remove();
$("#selectBox").append('<option value="1">Option 1</option>');
$("#selectBox").append('<option value="2">Option 2</option>');

要阅读有关jQuery中选择框可以执行的操作的更多信息，请阅读此处; http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/

使用jQuery动态构建UI

2 个答案: