使用JSON将多选框中的选项标记为已选择

Question

使用JSON将多选框中的选项标记为已选择

3

我有一个编辑表单在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);
        }
    }
});

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

- skyetech

你的选择器中有一个 input[name="Active"]，但是没有看到任何名为 'Active' 的输入，然后你尝试在输入上设置一个检查属性，但你可能想要在 select[name="Problems"] 元素中设置一个选项为已选中，对吗？ - dbf

@dbf 正确。为避免混淆，我应该在表单中显示所有字段。"Active" 是指两个单选按钮，用于设置标志为 true/false。 - skyetech

听起来很有帮助，我不会去“解释”或“假设”你可能没有写的东西 ;) - dbf

2个回答

0

在Select标签中的选项值应该等于数组中的值或者我们从jquery中标记为选中的值

$('#updatecategoryname').multiselect('select', array);

这里是多选示例

- sahil verma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tariqulazam · Accepted Answer

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