javascript - 使用 javascript 显示某个套餐的值(value)(价格)

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this 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>