Question

我具有以下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";
}

myTable：

$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”中选择一个新选项时才运行，我希望它在打开和加载页面时也能运行一次。

谢谢

Answer 1

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

$('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>

Answer 2

我建议拆分您想用完的功能，然后手动触发它。例如：

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

编辑：我为此解决方案添加了绑定。否则，$(this)的上下文将不正确。

Answer 3

首先，$(document).ready( ... )和嵌套的$(function() { ... })是redundant。

您可以将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);
});

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

3 个答案: