0

我正在使用以下脚本从我的数据库中获取记录，并使用 jquery、ajax 和 php 将它们放入选择框中。选择框也使用 Select 2 http://ivaynberg.github.io/select2/select-2.1.html#basics设置样式和添加功能

如果我从第一个选择框中选择客户，然后从第二个框中选择车辆，这很好........如果我改变主意并选择不同的公司，车辆框将停留在最后一个注册并且不会恢复为：

  <option>Select A Customers Vehicle</option>

如果我然后单击车辆选择框，我可以从公司中选择车辆，并且上次查询中的“幽灵车辆”消失了，所以它确实有效，只是当我再次更改公司时，我希望它只是重置车辆框再次恢复到默认值，直到我选择车辆。

这是主页：

    <script src="js/jquery/jquery.js"></script>
    <script src="js/jqueryui/js/jquery-ui.js"></script>
       <link href="js/select2/select2.css" rel="stylesheet"/>
        <script src="js/select2/select2.js"></script>
         <script>
            $(document).ready(function() { $("select").select2(); });

        </script>
    <?php
    if (session_status() !== PHP_SESSION_ACTIVE) {session_start();}
    if (isset($_SESSION['key'])) {$sessionkey = $_SESSION['key'];}else {$sessionkey = '';}
    if ($sessionkey == 'sbhjbKA2bsbhjbKA209bhjbKA2bsbhjbKA209KaXff19u0bsbhjbKA209KaXff19u9Ka'){
    include 'connectmysqli.php';
         echo '<link rel="stylesheet" href="css/template/template.css" />';
    echo '<strong class="pagetitle">Add New Sale</strong>
     ';
    $saleID = rand().rand();
    $today = date("Y-m-d");
    echo '<form method="post" action="addsalesubmit.php">';
    echo '<input type="hidden" value="'.$saleID.'" name="saleID" id="saleID">';
    echo '<input type="hidden" value="'.$today.'" name="date" id="date">';
    ?>
    <html>
        <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <title>Select test</title>
        <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#customer').on('change', function (){
            $.getJSON('select.php', {customerId: $(this).val()}, function(data){
                var options = '';
                for (var x = 0; x < data.length; x++) {
                    options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + ' - ' + data[x]['make'] + ' - ' + data[x]['model'] + '</option>';
                }
                $('#vehicle').html(options);
            });
        });
    });
    </script>
        </head>
        <body>
        <br>
            <select id="customer">
            <option>Please Select / Search For A Customer</option>
            <?php
    $sql = <<<SQL
    SELECT *
    FROM `customers`
    SQL;
    if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
    while($row = $result->fetch_assoc()){
    if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}else
    {$name = $row['bussinessname'];}
    echo '<option value="'.$row['customerID'].'">'.$name.'</option>';
    }
    echo '</select></p>';
            ?>
            </select>
            <br>
            <br>
        <select id="vehicle">
      <option>Select A Customers Vehicle</option>
    </select>
        </body>
    </html>
    <?php
    }
    else
    {echo '<h1 style="font-family:Verdana, Geneva, sans-serif; color:red;">Access Denied !</h1>';}
    ?>

这是执行所有获取的 php 脚本：

    <?php include 'connectmysqli.php'; ?>
    <?php
    $id = $_GET['customerId'];
    $sql = 'SELECT * FROM vehicles WHERE customerID = ' . (int)$id;
    $result = $db->query($sql);

    $json = array();
    while ($row = $result->fetch_assoc()) {
      $json[] = array(
        'id' => $row['vehicleID'],
        'reg' => $row['reg'],
        'make' => $row['make'],
        'model' => $row['model']
      );
    }
    echo json_encode($json);

    ?>
4

2 回答 2

1

在onchange第一个空的每次调用第二个下拉列表

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#customer').on('change', function (){
$('#vehicle').html("<option value=''>Select</option>");// add this on each call then add the options when data receives from the request
        $.getJSON('select.php', {customerId: $(this).val()}, function(data){
            var options = '';
            for (var x = 0; x < data.length; x++) {
                options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + ' - ' + data[x]['make'] + ' - ' + data[x]['model'] + '</option>';
            }
            $('#vehicle').html(options);
          $("select").select2();
        });
    });
});
</script>
于 2013-07-01T09:36:02.523 回答
1

未询问以下内容，但我必须建议您的代码中存在一些其他错误：

echo '</select></p>';
        ?>
        </select>

在您的客户选择框的末尾有两个</select>和一个</p>没有开头的<p>

于 2013-07-01T09:42:18.487 回答