第一次更改時重置第二個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下拉選擇框

回答

相關問題