Динамическое создание выпадающего меню с использованием данных json?

Я разработал скрипт, который получает json-данные из php-скрипта с использованием $ .getJSON. Данные JSON выглядит как '[{ "опция": "smart_exp"}, { "варианты": "user_intf"}, { "опция": "blahblah"}]'Динамическое создание выпадающего меню с использованием данных json?

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
//$('document').ready(function() { 

function Preload() { 
    $.getJSON("http://localhost/conn_mysql.php", function(jsonData){ 
    $.each(jsonData, function(i,j) 
    { alert(j.options);}); 
});} 

// }); 

</script></head> 
<body onLoad="Preload()"> 
</body> 
</html>

Я также разработал сценарий который динамически генерирует выпадающий список с использованием массива.

<HTML> 
<HEAD> 
<script language="javascript"> 
var myarray = new Array("apples","oranges","bananas","Peac"); 
function populate() 
{ for (i=0; i<myarray.length; i++) 
{ 
document.form1.fruits.options[i]=new Option(myarray[i], i); 
} 
} 
</script> 
</HEAD> 
<body onload="populate();"> 
<form name="form1"> 
My favourite fruit is : 
<select name="fruits" /> 
</form> 
</body> 
</HTML>

Теперь мне нужно динамически создать раскрывающийся список, используя данные, возвращаемые getJson, но у меня возникли проблемы в объединении обоих. Я буду очень благодарен за помощь. Вот что я пытался сделать, но не работал.

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
    //$('document').ready(function() { 

    function Preload() { 
    var myarray = new Array(); 
    $.getJSON("http://localhost/conn_mysql.php", function(jsonData){ 
    $.each(jsonData, function(i,j) 
    { myarray = j.options;});}); 
    for (i=0; i<myarray.length; i++) 
    { document.form1.fruits.options[i]=new Option(myarray[i]); } 
    } 
    // }); 
    </script></head> 
    <body onLoad="Preload()"> 
    <form name="form1"> 
    My favourite fruit is : 
    <select name="fruits" /> 
    </form> 
    </body> 
    </html>

источник

2010-10-21 XCeptable

Прежде всего, .getJSON() использует функцию обратного вызова, а это означает, что код выполняется в качестве второго аргумента .getJSON() не обязательно было к моменту вашего for цикл работает. Он запускается, как только сервер отвечает вашими данными conn_mysql.php JSON. Попробуйте вложенности его:

function Preload() { 
    $.getJSON("http://localhost/conn_mysql.php", function (jsonData) { 
     $.each(jsonData, function (i, j) { 
      document.form1.fruits.options[i] = new Option(j.options); 
     }); 
    }); 
}

Вы должны быть осведомлены о структуре вашего jsonData. Вот, это будет работать только тогда, когда структура была:

[ 
    { options: "item 1" }, 
    { options: "item 2" }, 
    { options: "item 3" }, 
]

Он перебирает весь объект, находя каждый элемент массива, а затем ищет options имущества этого элемента. Это то, что вы ищете?

источник

2010-10-21 20:18:48 clarkf

Grate, ur grate ...... thanX a Много. Теперь он работает с ур кодом. Одна из проблем заключается в том, что он работает только в IE до сих пор, не работает в firefox. Я думаю, мне нужно сделать // $ ('document'). Ready (function() работает, который теперь комментируется в моем этом коде, поскольку я не смог его исправить. Можете ли вы это увидеть, я думаю, что у него есть только проблемы с цепочками Могу ли я любезно сказать мне еще одну вещь, может PURE, т. Е. В этом случае будет использоваться механизм рендеринга JS. Если у меня пока нет информации о механизмах рендеринга JS. ThanX тысяча снова clarkf :-) - – XCeptable

@babar - I ' Я не уверен, что вы просите. Если вы спрашиваете о чистой библиотеке шаблонов (http://beebole.com/pure/), конечно, ее можно использовать здесь. Вам нужно немного изменить данные JSON в PHP-скрипте (я думаю, я незнаком с чистым). Проверьте документацию? – clarkf

Одна из проблем, я вижу, что в вашем каждом цикле, вы просто назначая j.options к MyArray вместо добавления его в массив. Изменить на:

myarray.push(j.options);

источник

2010-10-21 19:57:48 mbrevoort

я не уверен, что выглядит ваши данные в формате JSON, как, но, может быть, вам нужно что-то вроде этого:

function Preload() { 
    $.getJSON("http://localhost/conn_mysql.php", function(jsonData){ 
    $.each(jsonData, function(i,j){ 
     $('#ID-OF-YOUR-SELECT-ELEMENT').append(
     $('<option></option>').val(j.value).html(j.text) 
    ); 
    } 
); 
});}

j.value = значение опции вы хотите добавить j.text = имя опции вы хотите добавить (то, что видит пользователь)

источник

2010-10-21 20:08:28 lamarant

это выглядит как [{"options": "smart_exp"}, {"options": "user_intf"}, {"options": "blahblah"}] – XCeptable

Проблема с Internet Explorer/Firefox возможна из-за типа кодирования страницы - рекомендуем попробовать utf-8.

источник

2012-05-14 20:50:01

Динамическое создание выпадающего меню с использованием данных json?

ответ

Смежные вопросы