javascript - 设置使用ajax构建的下拉输出的初始值

我有以下下拉列表，当选择选项更改时，该列表会用ajax更改<div id="item"></div>的输出。我没有使用select2。

    <?php
    $biqsQuery = "SELECT biq.biqid, biq.name FROM biq";
    $biqs = $db->query($biqsQuery);
     ?>

            <select name="itemselector" id="itemselect">
                <?php foreach ($biqs ->fetchAll() as $biq): ?>
                    <option  value="<?php echo $biq['biqid']);?>">
                    <?php echo e($biq['name']);?>
                    </option>
                <?php    endforeach; ?>
            </select>

           <div id="item"></div>

PHP文件：

if(isset($_GET['itemselector'])){



$biqQuery = "SELECT biq.biqid, biq.name, biq.img
            FROM biq
            WHERE biq.biqid= :biqid     ";

$biq= $db ->prepare($biqQuery);

$biq->execute(['biqid' => $_GET['itemselector']]);

$selectedBiq=$biq->fetch(PDO::FETCH_ASSOC);

echo '<img src="'. $selectedBiq['img']. '">';
}

Javascript文件：

$('#itemselect').on('change',function(){
var self = $(this);

$.ajax({
    url: '../helpers/biq.php',
    type: 'GET',
    data: {itemselector : self.val()},
     success: function(data){

         $('#item').html(data);
     }
    });
 });

目前，它成功地更改了输出，这一部分没有问题。

但是，在首次加载页面时，它会在下拉菜单上显示表格的第一个值，但是不会将该第一个值的图像输出到<div>中。

我需要的是当页面加载时，我需要数据库中的第一个条目自动输出到<div id="item"></div>中。

任何帮助表示赞赏，在此先感谢。

最佳答案

您可以在身体负荷事件上编写以完成此操作。请更正是否有任何类型错误，但这将帮助您摆脱它

$(document).ready(function(){
  var first = $("#itemselect option:first").val();
  $.ajax({
    url: '../helpers/biq.php',
    type: 'GET',
    data: {itemselector : first},
     success: function(data){
         $('#item').html(data);
     }
  });
}); 

关于javascript - 设置使用ajax构建的下拉输出的初始值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38148080/