顯示值某些包（價格）與JavaScript

Question

我的數據庫表（包）是這樣的：

id, package, price 

當我選擇一個包，價格應該會自動顯示無需刷新頁面。

<div class="form-group"><label class="col-lg-3 control-label">Package</label> 
<div class="col-lg-4">         
    <select class="form-control" name="packageID"> 
    <option value="-1">Select Package</option> 
<?php 
    $select_package = mysql_query("SELECT * FROM package order by package"); 
    while($row = mysql_fetch_array($select_package)){ 
    echo "<option value='".$row[0]."'>"; 
    echo $row[1];           
    echo "</option>"; 
    } 
    ?> 
    </select> 
    </div> 
    </div> 

<div class="form-group"><label class="col-lg-3 control-label">Price</label> 
<div class="col-lg-4"><input type="text" name="price" placeholder="" class="form-control"></div> 
</div> 

幫助我的編碼

Answer 1

試試這個

  <div class="form-group"><label class="col-lg-3 control-label">Package</label> 
      <div class="col-lg-4">         
       <select class="form-control" name="packageID"> 
       <option value="-1">Select Package</option> 
      <?php 
       $select_package = mysql_query("SELECT * FROM package order by package"); 
       while($row = mysql_fetch_array($select_package)){ 
       echo "<option value='".$row[0]."' data-price=\"$row[2]\">"; 
       echo $row[1];           
       echo "</option>"; 
       } 
       ?> 
       </select> 
       </div> 
       </div> 

      <div class="form-group"><label class="col-lg-3 control-label">Price</label> 
      <div class="col-lg-4"><input type="text" name="price" placeholder="" class="form-control"></div> 
      </div> 
      <script src="http://code.jquery.com/jquery-latest.js"></script> 
      <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('[name=packageID]').on('change', function(){ 
        var price = $(this).find('option:selected').data('price'); 
        $('[name=price]').val(price); 
       }) 
      }); 
      </script>