Заполните выпадающий список с помощью JSON - PullRequest
3 голосов
/ 30 июня 2011

У меня есть таблица SQLite с идентификаторами и именами столбцов.Я возвращаю массив этих строк, таких как json, со страницы autocomplete.php.Как заполнить выбор с опциями (выпадающий список) с этим JSON, используя JQuery и JavaScript?Я новичок в JavaScript и JQuery, я погуглил, но не нашел как.В ASP.NET это легко, но здесь я не знаю.Может ли кто-нибудь помочь?

Это пример моего JSON, может быть намного дольше.

[
    {
        "id": "1",
        "name": "test"
    },
    {
        "id": "1",
        "name": "test"
    }
]

Ответы [ 2 ]

12 голосов
/ 30 июня 2011

HTML:

<select id="sel">

</select>

JavaScript:

$(function() {
    var data = [
        {
        "id": "1",
        "name": "test1"},
    {
        "id": "2",
        "name": "test2"}
    ];
    $.each(data, function(i, option) {
        $('#sel').append($('<option/>').attr("value", option.id).text(option.name));
    });
})

Вот рабочий пример.http://jsfiddle.net/ms2Ma/

3 голосов
/ 26 декабря 2015

Попробуйте, это даст вам возможность иметь любое количество раскрывающихся списков и узлов JSON для настройки раскрывающихся списков.

Необходимо выполнить несколько шагов:

  • Создатьмассив раскрывающихся списков (например, если вам нужно настроить телефон, вам следует использовать раскрывающийся список цветов, памяти и т. д.)
  • Создать объект JSON, как он создается в коде.Не изменяйте имя настраиваемых элементов, которое начинается с «level1» и заканчивается любым количеством узлов, так как оно должно быть синхронизировано с индексом элементов массива, который вы создаете.

Вот данные:

var Dropdowns = ["Model", "Color", "Memory","design","covers","music"];
var Data ={"phones":[
  {
     "oid":":000000F0:00000458:",
     "level1":"3G",
     "level2":"white",
     "level3":"16GB",
     "level4":"slim",
     "level5":"Back cover",
     "level6":"headphone",
     "price":"£568.63",
     "addToCart":"#Cart1"
  },
  {
     "oid":":000000F0:000003DA:",
     "level1":"3G",
     "level2":"black",
     "level3":"16GB",
     "level4":"slim",
     "level5":"Flip cover",
     "level6":"headphone",
     "price":"£615.79",
     "addToCart":"#Cart7"
  }]};

Полный рабочий код см. Здесь: https://jsfiddle.net/raju_sumit/681ppgq0/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...