使用来自 JSON 数据的 jquery 创建动态复选框

Question

我还没有在网上找到解决方案，如果有的话我很乐意去看看。我希望能够根据下拉菜单中的选择创建动态复选框，基本上下拉菜单看起来像这样

<select>
    <option value="Computer">Volvo</option>
    <option value="Vehicle">Saab</option>
</select>

我在数据库中有一个附件 table，用于存储应该向用户显示的附件。

 id | category | name |
----------------------------
 1 | computer  | mouse |
 2 | computer  | keyboard |
 2 | vehicles  | Roof-rack |

我想要一个场景，用户在下拉列表中选择一个类别，然后根据 table 中的配件名称动态创建一组复选框。我正在使用下面的代码 return a JSON 个附件名称。

$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) {

            });

编辑：数据 returned 看起来有点像；

 {
    "computer": [{
            "id": "1",
            "name": "mouse"
        },
        {
            "id": "2",
            "name": "keyboard"
        },

        {
            "id": "1",
            "name": "mouse"
        }
    ]
}

例如：如果用户从下拉列表中选择计算机，则应该会动态生成键盘、鼠标等配件的复选框。希望你能帮帮我。如果这很重要，我正在使用 laravel。谢谢

Answer 1

最好是 return 一个对象数组，然后您可以迭代每个附件并生成适当的相关 checkbox，如下例所示：

$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) {
    data = $.parseJSON(data);

    data.forEach( function (obj){
        $('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>');
    });
});

注意： 如果您不能更改 returned 结果，您可以只将解析行更改为：

data = $.parseJSON(data['computer']);

但是您应该考虑到 'computer' 应该作为变量动态更改。

希望这对您有所帮助。

var arr = [{
      "id": "1",
      "name": "mouse"
  },
  {
      "id": "2",
      "name": "keyboard"
  },

  {
      "id": "1",
      "name": "mouse"
  }
];

arr.forEach( function (obj)
{
    $('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_div"></div>

使用来自 JSON 数据的 jquery 创建动态复选框

Create dynamic checkboxes using jquery from JSON data

javascript

php

jquery

json

laravel