jquery - 使用 json 将选项标记为在多选中选择

Question

我在 jQuery 模式对话框中有一个编辑表单。它有一个直接从数据库填充的多选框。我正在编辑的记录来自使用 json 的数据库。有一个名为 problemids 的字段，其中包含以逗号分隔的 ID。

多选看起来像这样:

<select name="Problems" size="5" multiple="multiple" id="Problems">
    <option value="26">Backup battery error or cannot hold correct time.</option>
    <option value="22">Battery contacts damage</option>
    <option value="20">Belt clip damage</option>
    <option value="31">Cannot flash firmware</option>
    <option value="32">Cannot load task</option>
    <option value="34">Case damage</option>
    etc...  
</select>

json 返回如下所示:

[{
    "ModelID":33,
    "AccountID":1,
    "RandomID":"lo9876yhgbvfdr54",
    "ManID":5,
    "Model":"5090",
    "ProblemIDs":"22,26",
    "Active":true,
    "DateCreated":"2/27/2012 5:35:00 PM",
    "DateUpdated":"10/26/2012 2:04:00 PM",
    "UpdatedBy":6998,
    "CreatedBy":null
}]  

还有我的ajax:

$.ajax({
    url: "ajax/edit-model.asp",
    cache: false,
    data: { recordid: recordid, rid: rid, crud: crud },
    type: 'GET',
    dataType: "json",
    error: function(xhr, textStatus, errorThrown) {
        alert("An error occurrred! " + errorThrown);
    },
    success: function(data, textStatus) {
        $("#edit-dialogForm #RecordID").val(data[0].ModelID);
        $("#edit-dialogForm #RID").val(data[0].RandomID);
        $("#edit-dialogForm #ManID").val(data[0].ManID);
        $("#edit-dialogForm #Model").val(data[0].Model);
        if(data[0].Active){
            $('#edit-dialogForm input[name="Active"]:eq(0)').prop('checked', true);
        }else{
            $('#edit-dialogForm input[name="Active"]:eq(1)').prop('checked', true);
        }
    }
});

如何在多选中将项目标记为“已选择”？

Answer 1

fiddle - http://jsfiddle.net/tariqulazam/TXcgh/

var data = {
    "ModelID":33,
    "AccountID":1,
    "RandomID":"lo9876yhgbvfdr54",
    "ManID":5,
    "Model":"5090",
    "ProblemIDs":"22,26",
    "Active":true,
    "DateCreated":"2/27/2012 5:35:00 PM",
    "DateUpdated":"10/26/2012 2:04:00 PM",
    "UpdatedBy":6998,
    "CreatedBy":null
};
$.each(data.ProblemIDs.split(','), function(index, element){
                     $('#Problems').find('option[value="'+ element +'"]').attr('Selected', 'Selected');
});

更新:修改您的成功回调，如下所示

success: function(data, textStatus) {
        $("#edit-dialogForm #RecordID").val(data[0].ModelID);
        $("#edit-dialogForm #RID").val(data[0].RandomID);
        $("#edit-dialogForm #ManID").val(data[0].ManID);
        $("#edit-dialogForm #Model").val(data[0].Model);
        if(data[0].Active){
            $('#edit-dialogForm input[name="Active"]:eq(0)').prop('checked', true);
        }else{
            $('#edit-dialogForm input[name="Active"]:eq(1)').prop('checked', true);
        }
        $.each(data[0].ProblemIDs.split(','), function(index, element){
                     $('#edit-dialogForm #Problems').find('option[value="'+ element +'"]').attr('Selected', 'Selected');
        });
    }