时间戳

首页 > 解决方案 > 在页面加载时运行 Jquery 函数一次

javascript - 在页面加载时运行 Jquery 函数一次

问题描述

我有以下 Jquery 函数：

$( document ).ready(function() {
        $(function() {
        $('select[name="CPUmenu"]').change(function(e) {
          let socket = $(this).val();
          $('tbody tr[data-socket]').show();
          if (socket.length) {
            $('tbody tr[data-socket!="' + socket + '"]').hide();
          }
        });
    });
});

其他代码：

CPU菜单：

$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<select name='CPUmenu'>";
    echo "<option value=''>CPU</option>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        if ($row["name"] == $namehref) {
        echo "<option value='". $row["socket"] . "' selected>".$row["name"]."</option>";    
        } else {
        echo "<option value='". $row["socket"] . "'>".$row["name"]."</option>";
        }
    }
    echo "</select>";
} else {
    echo "0 results";
}

我的表：

$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><thead><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr></thead>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tbody><tr data-socket='". $row['socket'] . "'><td><a href='https://au.pcpartpicker.com/product/" . $row["id"] . "' target='_blank'>" . $row["name"] . "</a></td><td>" . $row["price"] . "</td><td>" . $row["socket"] . "</td><td>" . $row["chipset"] . "</td><td>" . $row["ramslots"] . "</td><td>" . $row["maxram"] . "</td></tr></tbody>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

我刚试过这个，但不，它根本不起作用

但是，它仅在我在“CPUmenu”中选择一个新选项时运行，我希望它在页面打开和加载时也运行一次。

谢谢

标签： javascriptjqueryhtml

解决方案

您可以在页面加载时触发更改：

$('select[name="CPUmenu"]').tigger('change');

请注意： $( document ).ready(function() {...和$(function() {...基本上一样的东西。您可以参考document-readyfunction-vs-function了解更多信息。

演示：

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        //$('tbody tr[data-socket!="' + socket + '"]').hide();
      }
      alert('change trigger');
   });
   $('select[name="CPUmenu"]').trigger('change'); // trigger here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="CPUmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

推荐阅读