php - 使用 ajax 进行选择下拉菜单时更新跨度

Question

我正在尝试使用 jquery / ajax / php 编写以下脚本。发生的事情是 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);

    ?>

编辑 >> 好的，我现在已经用最新的编辑更新了代码，这现在可以工作了......除了一个奇怪的问题......如果我选择列表中的第一个或最后一个项目，则不会显示价格，介于两者之间的任何东西看起来都很好............

Answer 1

应该是这样，您必须将价格存储在数组中，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>

Answer 2

在迭代之前，您必须将 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>

Answer 3

尝试这个，

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

Answer 4

尝试使用这个片段：

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