使用ajax创建选择下拉列表时更新范围

时间:2013-07-01 12:06:00

标签: php jquery ajax drop-down-menu

我正在尝试使用jquery / ajax / php编写以下脚本。 会发生什么是从数据库中提取所有记录并将它们放入选择下拉列表中。当我从下拉列表中选择一个项目时,ajax从数据库中提取价格并将其添加到名为priceeach1的范围中。那就是它应该做的,但我的jquery是没用的:-S。 stockID来自选择框值。

            <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
        $('#stock1').on('change', function (){

        var newValue1 = $.getJSON('select2.php', {stockID: $(this).val()}, function(data){
                    var options = '';
                   for (var x = 0; x < data.length; x++) { 
    options += data[x]['priceeach']; 
    }
     $('#priceeach1').text( options);
                });
            });
        });
        </script>

HTML:

Price Each : &pound;<span id="priceeach1"></span>

select2.php:

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

    $json = array();
    while ($row = $result->fetch_assoc()) {
      $json[] = array(
        'priceeach' => $row['priceeach'],
      );
    }
    echo json_encode($json);

    ?>

编辑&gt;&gt;好的,我现在已经用最新的编辑更新了代码,这现在可以.......除了一个奇怪的问题......如果我选择列表中的第一个或最后一个项目没有价格显示,介于两者之间看起来很好..........

4 个答案:

答案 0 :(得分:0)

试试这个,

   var options = [];
   for (var x = 0; x < data.length; x++) {
          options = data[x]['priceeach'];
   }
   $('#priceeach1').text(options.join(','));

答案 1 :(得分:0)

应该是这样的,您必须将价格存储在数组options[]而不是option中,然后将join存储在任何分隔符中

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $('#stock').on('change', function (){

    var newValue1 = $.getJSON('select2.php', {stockID: $(this).val()}, function(data){
                var options = '';
                for (var x = 0; x < data.length; x++) {
                    options[x] = data[x]['priceeach'];
                }
                $('#priceeach1').text(options.join(','));
            });
        });
    });
    </script>

答案 2 :(得分:0)

在迭代之前,您必须将JSON数据解析为实际的JSON对象。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $('#stock').on('change', function (){

    var newValue1 = $.getJSON('select2.php', {stockID: $(this).val()}, function(data){
                var jsonParsed = JSON.parse(data);
                var options = '';
                for (var x = 0; x < jsonParsed.length; x++) {
                    options[] = jsonParsed[x]['priceeach'];
                }
                $('#priceeach1').text(options.join(','));
            });
        });
    });
    </script>

答案 3 :(得分:0)

尝试使用此代码段:

for (var x = 0; x < data.length; x++) { 
options += data[x]['priceeach']; 
}
 $('#priceeach1').text( options);