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

其他代码：

CPUmenu：

$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=“从cpu选择名称、套接字”；
$result=$connection->query（$sql）；
如果（$result->num_rows>0）{
回声“；
回声“CPU”；
//每行的输出数据
而（$row=$result->fetch_assoc（））{
如果（$row[“name”]==$namehref）{
回显“$row[“name”]”；
}否则{
回显“$row[“name”]”；
}
}
回声“；
}否则{
回显“0结果”；
}

我的表格：

$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";
}

$sql=“从主板上选择名称、价格、id、插槽、RAM插槽、maxram、芯片组”；
$result=$connection->query（$sql）；
如果（$result->num_rows>0）{
echo“主板价格socketchipsetram SlotsMax Ram”；
//每行的输出数据
而（$row=$result->fetch_assoc（））{
回显“$row[“price”]。$row[“socket”]。$row[“chipset”]。$row[“ramslots”]。$row[“maxram”]。”；
}
回声“；
}否则{
回显“0结果”；
}

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

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

---

谢谢

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

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

请注意：

$（文档）。就绪（function（）{…

和

$（function（）{…

基本相同。您可以参考更多信息

演示：

$（函数（）{
$（'select[name=“CPUmenu”]”）。更改（函数（e）{
让套接字=$（this.val（）；
$（'tbody tr[data socket]'）。show（）；
if（插座长度）{
//$（'tbody tr[data socket！=“'+socket+''“]'）。hide（）；
}
警报（“变更触发器”）；
});
$（'select[name=“CPUmenu”]”）。触发器（'change'）；//此处触发器
})；

沃尔沃汽车
萨博
欧宝
奥迪

我建议拆分要运行的函数，然后手动触发它。例如：

$( document ).ready(function() {

  // This is the function, ready to be called
  function updateSocket() {
    let socket = $(this).val();
    $('tbody tr[data-socket]').show();
    if (socket.length) {
      $('tbody tr[data-socket!="' + socket + '"]').hide();
    }
  }

  // Save the element for usage later
  let dropdownElement = $('select[name="CPUmenu"]')

  // Set up the event listener for the dropdown
  dropdownElement.change(updateSocket);

  // Also call it manually.
  updateSocket.bind(dropdownElement)();
});

编辑：我为该解决方案添加了绑定。否则，

$（此）

将具有不正确的上下文。

首先，

$（文档）。准备就绪（…）

和嵌套的

$（函数（）{…}）

是

您可以将

change

函数移到处理程序外部并立即调用它：

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

---

将函数中的代码从let socket添加到rest。在页面加载和更改时调用该函数，以便在while循环中打印

。！您确定函数中的

$（此）

将捕获正确的元素吗？？？@Mohamed Yousef您是对的，则不会。谢谢，我已更新了示例。感谢您的知识。

$（此）

函数内部将引用

窗口

或其他内容，但不引用所需的元素..因此要正确使用它..需要为函数传递一个参数

函数更新复选框（元素）

然后在函数内部使用

元素

而不是

此

，如

let socket=$（element）.val（）

当您对元素使用函数时，您可以使用

updateSocket（this）

。祝您愉快：-）抱歉..我测试了它，它可以工作，无需添加参数（元素）…很抱歉..事实上我不知道在什么情况下我们需要使用论点..不管怎样记住它也许有一天知道会有用..再次抱歉：-）是的，这就是我添加绑定的目的。它不会像我最初编写的那样工作。

这个

绑定可能会有点混乱。我只是尝试了一下，但在第页上似乎不起作用load@Uskompuf，请用相关的HTML更新问题，以便我们可以测试代码。好的，给我一分钟我已经为CPUmenu添加了代码在myTable中，CPUmenu的select标记通过href和get的auto selected携带，但在页面加载时不执行排序功能，因此我正在尝试这样做。