如何根據第一次選擇時選擇的選項來隱藏選擇選項

我有兩個選擇下拉框。用戶必須先選擇類別，然后再根據第一個選擇顯示子類別的選項。 如果用戶選擇3的類別，它將顯示選項值為1, 2 , 3的子類別。選項值為0的將會在子類別中被隱藏/洗掉。

而如果用戶選擇了帶有0||1||2選項的類別，它將只在子類別選項中顯示其他。

我如何實作這一點。我必須使用hide函式來隱藏這個值嗎？

$('#category').change(function() {
  let cat = $(this).val（）。

  if (cat === '0'/span> || cat === '1'/span> || cat === '2'/span>) {
    console.log("other") 。
    $("#sub_category"/span>).change(function() {

      $('#sub_category').children('option[value="1"]').hide() 。
      $('#sub_category').children('option[value="2"]').hide() 。
      $('#sub_category').children('option[value="3"] ').hide()。
    });


  } else {

    $("#sub_category"/span>).change(function() {

      $('#sub_category').children('option[value="0"] ').hide() 。
    })
    console.log（cat）。
  }
});

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

< select name="category" id="category"> 
  <option value="0"/span>> 型別A</option> 
  <option value="1"/span>> 型別B</option>。
  <option value="2"/span>> 型別C</選項>
</select>/span>

< select name="sub_category" id="sub_category">/span>
  <option value=""/span> hidden> 選擇子類別</option>
  <option value="0"/span>> Other</option>
  <option value="1"/span>> Op1</option>。
  <option value="2"/span>> Op2</option>。
  <option value="3"/span>> Op3</option>。

</select>/span>

這是我所嘗試的，但它不作業

我將得到#category的值，并為每個選項運行，根據cat值顯示/隱藏。

你可以使用下面的演示：

$('#category').change(function() {
  $("#sub_category").val(' ')。
  let cat = $(this).val() 。
  $("#sub_category option").show() 。
  if (cat == 3) {
    $("#sub_category option").each(function (index, item) {
       var value = parseInt($(item).val()) 。
       if ([0].includes（value）) {
          $(item).hide()。
       }
    });
  } else {
    $("#sub_category option").each(function (index, item) {
       var value = parseInt($(item).val()) 。
       if ([1, 2, 3].includes（value）) {
          $(item).hide()。
       }
    });
  }
});

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

< select name="category" id="category"> 
  <option value="0"/span>> 型別A</option> 
  <option value="1"/span>> 型別B</option>。
  <option value="2"/span>> 型別C</option>
  <option value="3"/span>> 值3</option>。
</select>/span>

< select name="sub_category" id="sub_category">/span>
  <option value="> 選擇子類別</選項>/span>
  <option value="0"/span>> Other</option>
  <option value="1"/span>> Op1</option>。
  <option value="2"/span>> Op2</option>。
  <option value="3"/span>> Op3</option>。

</select>/span>

uj5u.com熱心網友回復：

你的JS代碼必須看起來像這樣。

你的JS代碼必須看起來像這樣。

$('#category'/span>).change(function(e) {
  let cat = e.currentTarget.value。

  if (cat === '0'/span> || cat === '1'/span> || cat === '2'/span>) {
    $('#sub_category').children('option[value="0"] ').show() 。
      $('#sub_category').children('option[value="1"]').hide() 。
      $('#sub_category').children('option[value="2"]').hide() 。
      $('#sub_category').children('option[value="3"] ').hide();

  } else {
      $('#sub_category').children('option[value="1"]').show() 。
      $('#sub_category').children('option[value="2"]').show() 。
      $('#sub_category').children('option[value="3"]').show() 。
      $('#sub_category').children('option[value="0"]').hide() 。
      console.log（cat）。
  }
});

標籤：

上一篇：如何將選中的復選框數值插入另一列？

下一篇：使用ul/li專案時，Accordion功能不作業