javascript - 用 JSON 数据填充多个选择框

原文 标签 javascript jquery json

我有以下数据库表(虽然数据库中有更多数据,但这还不是全部!):

catid   value   description
0        350     350 euro
0        500     500 euro
0        650     650 euro
1        0       No
1        1       Yes

在 PHP 和 json_encode() 的帮助下,我正在创建该表的 JSON 字符串:
jQuery171024539993586950004_1349776890005([{"0":"0","catid":"0","1":"350","value":"350","2":"350 euro","description":"350 euro"},{"0":"0","catid":"0","1":"500","value":"500","2":"500 euro","description":"500 euro"},{"0":"0","catid":"0","1":"650","value":"650","2":"650 euro","description":"650 euro"},{"0":"1","catid":"1","1":"0","value":"0","2":"No","description":"No"},{"0":"1","catid":"1","1":"1","value":"1","2":"Yes","description":"Yes"}])

现在我想要的是使用 JSON 来填充选择框,就像在 HTML 中一样:
<select id="0">
    <option value="350">350 euro</option>
    <option value="500">500 euro</option>
    <option value="650">650 euro</option>
</select>

<select id="1">
    <option value="0">No</option>
    <option value="1">Yes</option>
</select>

谁能帮我这个?我知道如何做一个循环来填充一个表(使用 $.getJSON),但我有点坚持这个。

最佳答案

此函数将遍历您发布的对象并填充菜单(给定您发布的来源):

var populateSelects = function(data) {
    var cat0 = $('select#0'),
        cat1 = $('select#1'),
        opt = $('<option />'),
        newOpt = {},
        cat0opts = [],
        cat1opts = [];
    $.each(data, function(i, obj) {
        //clone the option element so as to not re-create a new one
        newOpt = opt.clone();
        //obj is the JavaScript object in the array, so
        //dot-notation works nicely
        newOpt.text(obj.description).val(obj.value);
        if (obj.catid === "0") {
            //push the DOM element, not the jQuery object
            cat0opts.push(newOpt[0]);
        } else if (obj.catid === "1") {
            cat1opts.push(newOpt[0]);
        }
    });
    //Add the array of DOM elements to their respective menus,
    //clearing out any existing menu items.
    cat0.empty().append(cat0opts);
    cat1.empty().append(cat1opts);
};

下面是它的实际操作:http://jsfiddle.net/a5MTE/1/

重要的一点是 catid比较...如果解析的 JSON 返回 catid作为数字(不是字符串),您需要将比较更改为 if (obj.catid === 0) .

关于javascript - 用 JSON 数据填充多个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12797727/

相关文章:

javascript - 如何使用keith-wood日历突出显示特定日期的日期并在悬停时显示事件?

android - 我有两个 Activity 。我想将数据从第二个 Activity 发送到前一个 Activity 。第一个 Activity 有自定义 ListView

javascript - 在不知道 sessionStorage 的键名的情况下访问 JSON 对象的元素

java - Jackson 如何知道何时使用 BeanSerializer 和 MapSerializer

javascript - 为什么这是真的 : parseInt(1111111111111111, 2) === parseInt(111111111111111111,2)

javascript - 无法在 ExpressJS 服务的索引文件中包含 JS 文件

javascript - 有没有办法使用 javascript 关闭文件上传对话框?

javascript - jQuery:$.on 应该如何工作?

jquery - 根据多个选择/隐藏元素更改表格行颜色

javascript - jQuery使图像弹出框在随机位置不起作用