如何使用 Javascript 隱藏基於 HTML 表單中另一個下拉列表的選擇的下拉選項

Question

當從源中選擇選項德里時，這是我用來從下拉目標中隱藏選項德里的 JS 代碼

   < script type = 'text/javascript' >
      function getSelectValue(Source) {
        if (Source != '') {
          $(Destination option[value = '"+Source+"']).hide();
        }

      } <
      /script>

這是我用於下拉菜單的 HTML 代碼

<div class="row">
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <!-- Source -->
                        <h5 class="card-title">Source</h5>
                        <select name="Source" id="Source" required="required" onchange= "getSelectValue(this.value);">
                            <option value="Delhi">Delhi</option>
                            <option value="Kolkata">Kolkata</option>
                            <option value="Mumbai">Mumbai</option>
                            <option value="Chennai">Chennai</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Destination</h5>
                        <!-- Destination -->
                        <select name="Destination" id="Destination" required="required">
                            <option value="Cochin">Cochin</option>
                            <option value="Delhi">Delhi</option>
                            <option value="Hyderabad">Hyderabad</option>
                            <option value="Kolkata">Kolkata</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

附言我在表格中使用過它

Answer 1

請找到以下解決方案

將您的 select 包裝在帶有 id 的范圍內
如果選擇源將所有目標選項推送到一個數組。
使用 span id 通過傳遞選定的源值在目標范圍內找到選項。
在迭代選項值時，不要忘記通過傳遞特定選項值來顯示所有值...如果您跳過此步驟，那么您將首先隱藏的選項在下一步中將不可見，例如。 如果你第一次使用 select Delhi delhi 將使用第 5 步從目的地隱藏，但現在如果你再次從源 select Kolkata 那么 kolkata 將與目的地的 delhi 一起隱藏......只是為了避免第一次顯示所有選項遍歷所有選項，然后隱藏所需的選項即可。
一旦找到與所選源匹配的目標，將其隱藏。
反之亦然，我在下面添加了一個新的 function。

 function getSelectValue(Source) { var optionsArr = []; var x = document.getElementById("Destination"); var txt = "All options: "; var i; for (i = 0; i < x.length; i++) { optionsArr.push(x.options[i].text); const options = $("#dest_span>select>option[value='"+x.options[i].text+"']").show(); } const options = $("#dest_span>select>option[value='"+Source+"']").hide(); } function getSelectValueDest(Dest) { var optionsArr = []; var x = document.getElementById("Source"); var txt = "All options: "; var i; for (i = 0; i < x.length; i++) { optionsArr.push(x.options[i].text); const options = $("#src_span>select>option[value='"+x.options[i].text+"']").show(); } const options = $("#src_span>select>option[value='"+Dest+"']").hide(); }

 <html> <head> <meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <.-- Source --> <h5 class="card-title">Source</h5> <span id="src_span"> <select name="Source" id="Source" required="required" onchange="getSelectValue(this.value)" > <option value="Delhi">Delhi</option> <option value="Kolkata">Kolkata</option> <option value="Mumbai">Mumbai</option> <option value="Chennai">Chennai</option> </select> </span> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Destination</h5> <!-- Destination --> <span id="dest_span"> <select name="Destination" id="Destination" required="required" onchange="getSelectValueDest(this.value)"> <option value="Cochin">Cochin</option> <option value="Delhi">Delhi</option> <option value="Hyderabad">Hyderabad</option> <option value="Kolkata">Kolkata</option> </select> <span> </div> </div> </div> </div> </body> </html>

添加代碼片段以供參考。

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <!-- Source -->
            <h5 class="card-title">Source</h5>
            <select
              name="Source"
              id="Source"
              required="required"
              onchange="getSelectValue(this)"
            >
              <option value="Delhi">Delhi</option>
              <option value="Kolkata">Kolkata</option>
              <option value="Mumbai">Mumbai</option>
              <option value="Chennai">Chennai</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Destination</h5>
            <!-- Destination -->
            <select name="Destination" id="Destination" required="required">
              <option value="Cochin" >Cochin</option>
              <option value="Delhi" id="Delhi">Delhi</option>
              <option value="Hyderabad">Hyderabad</option>
              <option value="Kolkata">Kolkata</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    function getSelectValue(elem) {
      const value = elem.value;
      if (value === "Kolkata") {
        document.getElementById("Delhi").remove();
      }
    }
  </script>
</html>

如何使用 Javascript 隱藏基於 HTML 表單中另一個下拉列表的選擇的下拉選項

問題描述

2 個解決方案

解決方案1
0 2022-03-07 16:50:53

解決方案2
-1 2022-03-05 12:02:50

如何使用 Javascript 隱藏基於 HTML 表單中另一個下拉列表的選擇的下拉選項

問題描述

2 個解決方案

解決方案1 0 2022-03-07 16:50:53

解決方案2 -1 2022-03-05 12:02:50

解決方案1
0 2022-03-07 16:50:53

解決方案2
-1 2022-03-05 12:02:50