jquery将值绑定到html选择标记

时间:2013-08-01 15:49:27

标签: jquery html

任何人都可以提供以下帮助:

我有一个ajax方法,它调用服务器端代码并​​检索书籍列表并加载到html表中。

   function LoadData(data) {

  var tbody = $("#accountTable > tbody").html("");
  var thead = $("#accountTable > thead").html("");

   var rowHead = "<tr>"
                + "<th style='border-bottom-style:dotted;border-bottom-width:1px;font-size:10px'>Name</th>"
                + "<th style='border-bottom-style:dotted;border-bottom-width:1px;font-size:10px'>Quantity</th>"
                + "<th style='border-bottom-style:dotted;border-bottom-width:1px;font-size:10px'>Price</th>"
                + "<th style='border-bottom-style:dotted;border-bottom-width:1px;font-size:10px'>Status</th>"
                + "</tr>";
    $(rowHead).appendTo(thead);

    // ASP.NET encapsulates JSON responses in a property "d"
    if (data.hasOwnProperty("d")) 
    { 
        data = data.d;     
    }

    //iterate through and append to table
    for (i = 0; i < data.length; i++) {
     var rowText = "<tr><td style='text-align: left;font-size:10px;'>" + data[i].Name
        + "</td><td style='text-align: left;font-size:10px;'>" + data[i].Quantity 
        + "</td><td style='text-align: left;font-size:10px;'>" + data[i].Price 
        + "</td><td style='text-align: left;font-size:10px;'>"
        + "<select id=" + data[i].Id + ">"
        + "<option value='Unconfirmed'>UnConfirmed</option>" 
        + "<option value='Confirmed'>Confirmed</option>"
        + "<option value='Suspend'>Suspend</option>"
        + "</select></td></tr>";
        $(rowText).appendTo(tbody);

        } 
}

如何将数据库中的字段Status(data [i] .Status)值绑定到select标记。用户可以切换此值,但默认值应绑定到数据库中的值。提前谢谢。

2 个答案:

答案 0 :(得分:1)

用这样的代码替换代码的相应部分(如果我正确理解你的需要):

for (i=0;i<data.length;i++) {
  var options = {"unconfirmed":"","confirmed":"","suspend":""};
  options[data[i].Status] = "selected";
  ...
  + "<option value='Unconfirmed' "+options.unconfirmed+">UnConfirmed</option>"
  + "<option value='Confirmed' "+options.confirmed+">Confirmed</option>"
  + "<option value='Suspend' "+options.suspend+">Suspend</option>"
  ...
}

答案 1 :(得分:1)

这样做的直接方法就是这样做。

    + "<option value='Unconfirmed'"+(data[i].Status == "Unconfirmed"?" selected":"")+">UnConfirmed</option>" 
    + "<option value='Confirmed'"+(data[i].Status == "Confirmed"?" selected":"")+">Confirmed</option>"
    + "<option value='Suspend'"+(data[i].Status == "Suspend"?" selected":"")+">Suspend</option>"