根據先前的選擇顯示下拉值-有解無憂

當我在第一個下拉串列中單擊它時，是否可以僅在我的第二個下拉選項中顯示相關資料？我在stackoverflow上看到了一個類似的問題，但我無法讓它作業。該根據先前的選擇顯示下拉值

這是我正在使用的代碼..

<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Department</label>
    <div class="position-relative">
      <div class="input-group mb-3" id="dept">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select category" id="dept" name="dept" required>
          <option value="" disabled selected>Choose...</option>
          <option value="GS">Grade School</option>
          <option value="JHS">Junior High School</option>
          <option value="SHS">Senior High School</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Grade & Section (for students only)</label>
    <div class="position-relative">
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select operator" id="u_grdsec" name="u_grdsec">
          <option value="" disabled selected>Choose...</option>
          <option value="Grade 1" class="GS">Grade 1</option>
          <option value="Grade 2" class="GS">Grade 2</option>
          <option value="Grade 7" class="JHS">Grade 7</option>
          <option value="Grade 8" class="JHS">Grade 8</option>
          <option value="Grade 11" class="SHS">Grade 11</option>
          <option value="Grade 12" class="SHS">Grade 12</option>
        </select>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
      $(document).on('change', '.category', function () {
          var val = $(this).val().toLowerCase();
          $('.operator option').hide();
          $('.operator option.' val).show();
          $('.operator option.' val ':first').attr('selected','selected').change();
      });
  });
</script>

這是我的資料庫的螢屏截圖。

根據先前的選擇顯示下拉值

uj5u.com熱心網友回復：

小問題的快速修復

這個問題很小，很難發現，但很容易解決。

資料庫中的部門欄位值是大寫的，但腳本會嘗試匹配小寫。因此，永遠不會有匹配項，并且腳本會隱藏您的所有成績選項。

要解決此問題，請更改以下代碼行，如下所示：

var val = $(this).val().toLowerCase(); // incorrect

將其更改為：

var val = $(this).val().toUpperCase(); // correct

是的，就是這么簡單！你非常接近，但只需要一點幫助來發現錯誤。;)

您可以運行下面的代碼片段來查看您的代碼是否正常作業。

附錄： 您可能還想進行另一項（可選）更改。將“removeAttr”附加到以下行。This will clear the previous selection when a different department is selected.

 $('.operator option').hide().removeAttr("selected");

$(document).ready(function () {
      $(document).on('change', '.category', function () {
          // var val = $(this).val().toLowerCase();  // <----- HERE IS THE PROBLEM
          var val = $(this).val().toUpperCase();
          $('.operator option').hide().removeAttr("selected");
          $('.operator option.' val).show();
          $('.operator option.' val ':first').attr('selected','selected').change();
      });
  });

<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Department</label>
    <div class="position-relative">
      <div class="input-group mb-3" id="dept">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select category" id="dept" name="dept" required>
          <option value="" disabled selected>Choose...</option>
          <option value="GS">Grade School</option>
          <option value="JHS">Junior High School</option>
          <option value="SHS">Senior High School</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Grade & Section (for students only)</label>
    <div class="position-relative">
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select operator" id="u_grdsec" name="u_grdsec">
          <option value="" disabled selected>Choose...</option>
          <option class="GS">Kindergarten</option>
          <option class="GS">Grade 1</option>
          <option class="GS">Grade 2</option>
          <option class="GS">Grade 3</option>
          <option class="GS">Grade 4</option>
          <option class="GS">Grade 5</option>
          <option class="GS">Grade 6</option>
          <option class="JHS">Grade 7</option>
          <option class="JHS">Grade 8</option>
          <option class="JHS">Grade 9</option>
          <option class="JHS">Grade 10</option>
          <option class="SHS">Grade 11</option>
          <option class="SHS">Grade 12</option>
       
<!--  PHP and DB disabled for this example

          <?php
            $conn = OpenCon();
            
            $sql = "SELECT * FROM `grdlvl`";
            
            $result = $conn->query($sql);
            
            if ($result->num_rows > 0) {
            
            while ($row = $result->fetch_assoc()) {
            
            ?>
          <option value="<?php echo $row['g_grdsec']; ?>" ><?php echo $row['g_grdsec']; ?></option>
          <?php
            }
            }
            ?>
-->            
            
            
        </select>
      </div>
    </div>
  </div>
</div>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

我完成了您遇到的上一個問題，并決定簡單地使用在該問題中創建的示例 - 但在一個有效的代碼筆中。 https://codepen.io/Stoffe91/pen/YzYpwNO

下面的 HTML：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<select class="category">
    <option val="price">Price</option>
    <option val="weight">weight</option>
    <option val="size">Size</option>
    <option val="dimension">Dimension</option>
</select>
<select class="operator">
    <option val="1" class="price">For Price 1</option>
    <option val="2" class="price">For Price 2</option>
    <option val="3" class="price">For Price 3</option>
    <option val="4" class="price">For Price 4</option>    
    <option val="1" class="weight">For Weight 1</option>
    <option val="2" class="weight">For Weight 2</option>
    <option val="3" class="weight">For Weight 3</option>
    <option val="4" class="weight">For Weight 4</option>    
    <option val="1" class="size">For Size 1</option>
    <option val="2" class="size">For Size 2</option>
    <option val="3" class="size">For Size 3</option>
    <option val="4" class="size">For Size 4</option>
    <option val="1" class="dimension">For Dimension 1</option>
    <option val="2" class="dimension">For Dimension 2</option>
    <option val="3" class="dimension">For Dimension 3</option>
    <option val="4" class="dimension">For Dimension 4</option>
</select>

下面的jquery：

   $(document).ready(function () {
    $(document).on('change', '.category', function () {
      console.log('now');
        var val = $(this).val().toLowerCase();
        $('.operator option').hide();
        $('.operator option.' val).show();
       $('.operator option.' val ':first').attr('selected','selected').change();
    });
});

看看這個。如果您遇到問題，請說明您遇到問題的部分。只需將其應用于您當前的專案。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/447373.html

標籤：javascript php html jQuery

上一篇：如何從字串中獲取前兩個唯一單詞并用下劃線（_）替換空格

下一篇：在phpif子句中顯示字體真棒圖示