Динамически генерировать выпадающий список с использованием данных JSON? - PullRequest
Новая
       27

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

2 голосов
/ 21 октября 2010

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

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

Ответы [ 4 ]

2 голосов
/ 22 октября 2010

Я не уверен, как выглядят ваши данные 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 = название опции, которую вы хотите добавить (что видит пользователь)

1 голос
/ 22 октября 2010

Прежде всего, .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 этого элемента. Это то, что вы ищете?

0 голосов
/ 15 мая 2012

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

0 голосов
/ 21 октября 2010

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

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

Похожие темы

...