设置使用ajax构造的下拉输出的初始值

Question

我有以下下拉列表，当select选项被更改时，它会用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>。

提前感谢任何帮助。

Answer 1

你可以写一下身体负荷事件来完成这个。请更正，如果有任何类型的错误，但这将有助于你摆脱它

$(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);
     }
  });
});