亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

根據選項菜單 1 或 2 中的選擇隱藏或顯示選項菜單

根據選項菜單 1 或 2 中的選擇隱藏或顯示選項菜單

jeck貓 2022-05-26 17:55:23
我有三個選擇選項的設置。顯示了兩個選項菜單，當您在選項菜單NIV 2中選擇一個值時，將顯示第三個。我需要它工作的方式是，當您在第一個選項菜單NIV 1中選擇一個值時，它將使用匹配的選項菜單更改第二個選項菜單NIV 2 。當您在選項菜單NIV 2中選擇一個值時，將顯示第三個選項菜單NIV 3。NIV 1、2 和 3 的說明：使用我當前的代碼，我可以在選項菜單NIV 1中選擇任何值，選項菜單NIV 2將相應地更改我在選項菜單NIV 1中選擇的值。問題： 當我在選項菜單NIV 2選項菜單中選擇一個值時， NIV 3將正確顯示。但是由于某種原因，選項菜單NIV 2消失了。我目前無法找到問題所在。我當前的代碼和實時示例：$('.selectdata').change(function() {  var role = $(this).val();  switchRole(role);});function switchRole(role) {  var sel = $('select[data-role= ' + role + '   ]');  sel.show();  hideSelects(role, sel)};hideSelects = function(role, selected) {  var elements = $("select").filter(function() {    return $(this).data("role") !== undefined;  });  var toHide = $(elements).not(selected);  toHide.hide();};
查看完整描述

1 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

問題出在你的hideSelects()功能上。它隱藏了所有不是由函數確定的新選擇的值的選擇switchRole()。


假設您只想隱藏當前選擇的同級選擇。幸運的是，jQuery 讓這一切變得非常簡單。在下面的片段中，我替換了：


var elements = $("select").filter(function() {

和


var elements = $(selected).siblings().filter(function() {

它似乎按預期工作。這是假設它確實是您想要隱藏的兄弟選擇，并且它們將始終是您的 html 中的兄弟。希望有幫助！


$('.selectdata').change(function() {

  var role = $(this).val();

  switchRole(role);

});


function switchRole(role) {

  var sel = $('select[data-role= ' + role + '   ]');

  sel.show();

  hideSelects(role, sel)

};


hideSelects = function(role, selected) {

  var elements = $(selected).siblings().filter(function() {

    return $(this).data("role") !== undefined;

  });

  var toHide = $(elements).not(selected);

  toHide.hide();

};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card mt-3">

  <div class="card-body">

    <div class="form-group row">

      <label class="col-md-1 m-t-15">Select option:</label>

      <!-- OPTIE 1 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select class="selectdata form-control custom-select" style="width: 100%; height:36px;">

          <optgroup label="Select option NIV 1">

            <option value="A1">NIV1 A</option>

            <option value="A2">NIV1 B</option>

            <option value="A3">NIV1 C</option>

          </optgroup>

        </select>

      </div>

      <!-- OPTIE 2 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select data-role="A1" class="selectdata form-control custom-select" style="width: 100%; height:36px;">

          <optgroup label="Select option NIV 2">

            <option value="B11">A 11</option>

            <option value="B12">A 12</option>

            <option value="B13">A 13</option>

          </optgroup>

        </select>

        <select data-role="A2" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="Select option NIV 2">

            <option value="B21">A 21</option>

            <option value="B22">A 22</option>

            <option value="B23">A 23</option>

          </optgroup>

        </select>

        <select data-role="A3" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="Select option NIV 2">

            <option value="B31">A 31</option>

            <option value="B32">A 32</option>

            <option value="B33">A 33</option>

          </optgroup>

        </select>

      </div>

      <!-- OPTIE 3 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select data-role="B11" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A1 - 1</option>

            <option value="2">NIV3 A1 - 2</option>

            <option value="3">NIV3 A1 - 3</option>

          </optgroup>

        </select>

        <select data-role="B12" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B13" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

        <select data-role="B21" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A - 1</option>

            <option value="2">NIV3 A - 2</option>

            <option value="3">NIV3 A - 3</option>

          </optgroup>

        </select>

        <select data-role="B22" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B23" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

        <select data-role="B31" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A - 1</option>

            <option value="2">NIV3 A - 2</option>

            <option value="3">NIV3 A - 3</option>

          </optgroup>

        </select>

        <select data-role="B32" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B33" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

      </div>

    </div>

  </div>

</div>



查看完整回答
反對 回復 2022-05-26
  • 1 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號