Как динамически добавить опцию в список выбора, который строится с использованием данных json, полученных из php-скрипта? - PullRequest
1 голос
/ 25 октября 2010

У меня есть HTML-форма, которая создает раскрывающийся список данных json, которые динамически извлекаются при загрузке страницы из сценария php.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() { 
        jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
        $.each(jsonData, function (i, j) {
        document.index.user_spec.options[i] = new Option(j.options);
     });});
     });
</script></head>
<body>
<form name="index">
<select name="user_spec" id="user_spec" />
</form>
</body>
</html> 

Скрипт php извлекает данные из таблицы MySQL.

<?php  
      $username = "user";  
      $password = "********";  
      $hostname = "localhost";  
      $dbh = mysql_connect($hostname, $username, $password) or die("Unable to connect   
      to MySQL");  
      $selected = mysql_select_db("spec",$dbh) or die("Could not select first_test");  $query =
      "SELECT * FROM user_spec";  
      $result=mysql_query($query);     
      $outArray = array(); 
      if ($result) { 
      while ($row = mysql_fetch_assoc($result)) $outArray[] = $row; 
    } 
      echo json_encode($outArray);  
?> 

Мне нужно добавить к нему функциональность теперь, когда новые параметры могут добавляться динамически из формы в список. Как мне это сделать? Я думаю сделать это так, как пользователь добавляет опцию в текстовое поле и нажимает кнопку. Те же данные JSON модифицируются и отправляются обратно на сервер, который считывает и сохраняет их в базе данных. Список обновляется / перерисовывается с этими измененными данными.

1 Ответ

1 голос
/ 25 октября 2010
 jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {

    $("#user_spec").html("");//clear old options
                jsonData= eval(jsonData);//get json array

                for (i = 0; i < jsonData.length; i++)//iterate over all options
                {
                  for ( key in jsonData[i] )//get key => value
                  { 
                        $("#user_spec").get(0).add(new Option(jsonData[i][key],[key]), document.all ? i : null);
                  }
                }

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