第一次更改时重置第二个jquery下拉选择框

我正在使用以下脚本从我的数据库中提取记录，并将它们放入使用jquery，ajax和php的选择框中。该选择框也风格和附加功能使用选择2 http://ivaynberg.github.io/select2/select-2.1.html#basics 第一次更改时重置第二个jquery下拉选择框

如果我从第一个选择框客户，然后选择与第二箱的车辆能正常工作........如果我然后改变了主意，选择不同的公司，车辆盒停留在最后一个章，并不会恢复到：

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

    ?>

来源

2013-07-01 Iain Simpson

在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-01 09:36:02

谢谢，四试过，但它仍然停留在过去的REG选择 –

不该它是一个append（）而不是html（） – steven

@steven不，它不应该追加，因为append将在现有的选项中添加选项，并且使用'html'将首先删除先前的选项，然后添加新的选项 –

以下是不问，但我不得不建议你，有一些额外的错误在你的代码：

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

有两种</select>和一个</p>不会在您的客户选择框的末尾开始<p>

来源

2013-07-01 09:42:18 steven

谢谢，我已经删除了那些现在 –

第一次更改时重置第二个jquery下拉选择框

回答

相关问题