Question

我还没有在网上找到解决方案，如果它可用，我很想看看。我希望能够根据下拉列表中的选择创建动态复选框，基本上下拉列表看起来像这样

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

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

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

我希望有一个用户在下拉列表中选择一个类别的场景，然后根据表格中附件的名称动态创建一组复选框。我正在使用下面的代码应该返回附件名称的JSON。

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

            });

编辑：返回的数据看起来像是;

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

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

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

Answer 1

最好返回一个对象数组，然后你可以迭代每个附件并生成正确的相关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/>');
    });
});

注意：如果您无法更改返回的结果，则可以将解析行更改为：

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数据

1 个答案: