Question

我想让用户从数据库中选择一个项目。具有预先填充的所有属性的表单将显示在ajax调用上，并且用户可以编辑这些字段。它的工作原理除了下拉列表有一个预先选择的选项，我不能从该下拉列表中选择任何其他选项。

当我尝试在页面上没有任何ajax的db中填充下拉列表并使用选定的作品时，用户可以先看到所选的值，然后继续更改它。

指数：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" >
    <title>Select to Autocomplete</title>
    <script src="jquery.js"></script>
    <script src="jquery-ui-autocomplete.js"></script>
    <script src="jquery.select-to-autocomplete.min.js"></script>
    <script type="text/javascript">
      (function($){
        $(function(){
          $('select').selectToAutocomplete();
          $('#update').change(function(){
            var input = $(this).serialize();
            var parts = input.split('=');
            var box = parts[1];
            $.ajax({ // ajax call starts
                url: 'server4.php', // JQuery loads serverside.php
                data: 'box=' + box, // Send value of the clicked button
                dataType: 'json', // Choosing a JSON datatype
                success: function(data) // Variable data constains the data we get from serverside
                {
                    $('#updatediv').html(''); // Clear #content div
                    $('#updatediv').append(data);
                }
            });
            return false;
          });
        });
      })(jQuery);
    </script>
    <style type="text/css" media="screen">
      body {
        font-family: Arial, Verdana, sans-serif;
        font-size: 13px;
      }
    .ui-autocomplete {
      padding: 0;
      list-style: none;
      background-color: #fff;
      width: 218px;
      border: 1px solid #B0BECA;
      max-height: 350px;
      overflow-y: scroll;
    }
    .ui-autocomplete .ui-menu-item a {
      border-top: 1px solid #B0BECA;
      display: block;
      padding: 4px 6px;
      color: #353D44;
      cursor: pointer;
    }
    .ui-autocomplete .ui-menu-item:first-child a {
      border-top: none;
    }
    .ui-autocomplete .ui-menu-item a.ui-state-hover {
      background-color: #D5E5F4;
      color: #161A1C;
    }
    </style>
</head>
<body>

<center>
<table>
    <tr>
        <td style="height: 20px;"></td>
    </tr>
</table>
<h1>Update</h1>
<form id="update">
    <table cellpadding="10" width="800">
        <tr>
            <td colspan="3" style="text-align: center;"><div class="form_result" style="color:#ff0000; font-weight: bold;"> </div></td>
        </tr>
        <tr>
            <td style="text-align: left;" colspan="3">Select an Application:
                <select name="item" id="selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
                    <option value="" selected="selected">Select Item</option>
                    <?php
                        $db = new mysqli('host', 'root', 'pword', 'table');

                        if($db->connect_errno > 0){
                            die('Unable to connect to database [' . $db->connect_error . ']');
                        }

                        // Creating divs
                        $result = $db->query("SELECT * FROM items");

                        while($row = $result->fetch_assoc())
                        {
                            echo '<option value="'.$row['name'].'">'.$row['name'].'</option>';
                            echo '<option value="'.$row['full_name'].'">'.$row['full_name'].'</option>';
                        }

                        $db->close();
                    ?>
                </select>
            </td>   
        </tr>
        <tr>
            <td colspan="3" style="height: 10px;"></td>
        </tr>
    </table>

    <div id="updatediv" style="width:800px;border:0;">
    </div>
</form>
</center>

</body>
</html>

服务器：

<?php  

// Get value of clicked button 
$box = $_GET['box'];  

$db = new mysqli('host', 'user', 'pword', 'table');

                        if($db->connect_errno > 0){
                            die('Unable to connect to database [' . $db->connect_error . ']');
                        }

                        // Creating divs
                        $result = $db->query("SELECT * FROM items");

$string = '<form><table>';

if (strlen($box)>2) {
    while($row = $result->fetch_assoc())
    {
        if($box == $row['name'] OR $box == $row['full_name']) {
            $string .= '                        <tr>
                            <td colspan="3" style="text-align: left;">Category: <span class="required">*</span>
                                <select name="category">
                                    <option value="abc" '; if($row['category'] == 'abc') { $string .= 'selected'; } $string .= '>ABC</option>
                                    <option value="def" '; if($row['category'] == 'def') { $string .= 'selected'; } $string .= '>DEF</option>
                                </select>
                            </td>
                        </tr>
                        ';
            }       
    }
}

$string .= '</table></form>';
print json_encode($string);

$db->close();

?>

生成的输出

<form>
   <table>
      <tr>
         <td colspan="3" style="text-align: left;">
            Category: <span class="required">*</span> 
            <select name="category">
               <option value="apple" selected>Apple</option>
               <option value="banana" >Banana</option>
               <option value="orange" >Orange</option>
            </select>
         </td>
      </tr>
   </table>
</form>

下拉列表卡在所选项目上

0 个答案: