從 niceSelect 獲取數據值以顯示隱藏的 div

Question

使用niceSelect后出現問題。 在此之前我只是使用簡單的 Javascript 來顯示和隱藏表格。 在我使用 niceSelect 之前，它工作正常，因為value只是value 。 但是在我使用 niceSelect 之后， select 選項中的value element變為data-value

HTML：

<select class="wide" id="selectTbl">
       <option value="0" selected>Select</option>
       <option value="1">Admin</option>
       <option value="2">Mechanic</option>
       <option value="3">User</option>
       <option value="4">Business</option>
</select>

Javascript：

document.getElementById('selectTbl').addEventListener('change', function () {
    $("#selectTbl").val();
    var style = $(this).val() == 1 ? 'block' : 'none';
    document.getElementById('TblAdmin').style.display = style;

    var style = $(this).val() == 2 ? 'block' : 'none';
    document.getElementById('TblMech').style.display = style;

    var style = $(this).val() == 3 ? 'block' : 'none';
    document.getElementById('TblUser').style.display = style;

    var style = $(this).val() == 4 ? 'block' : 'none';
    document.getElementById('TblBiz').style.display = style;
});

有人可以幫我嗎？ 在這里我想顯示 div 是TblAdmin ， TblMech ， TblUser ， TblBiz 。 我目前正在使用 NiceSelect 但在 select 下拉列表中它具有數據值屬性。 它實際上不是 select 而是無序列表中的列表項。

就像這里顯示的圖片， https://drive.google.com/file/d/1VyHDMb1Gl4PYBe19XZt1Z8Z-2OLAS1mx/view?usp=sharing

Answer 1

好的，我明白了這個問題。 “更改”不起作用，因為它不再是正常的“選擇”。 您必須檢測點擊，然后檢查值。

但是我建議你不要使用這個庫，它似乎被遺棄了，而且非常有限，方法不夠。 jquery 現在也不是很常用。

但是如果你想使用這個庫，你可以這樣做：

    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function() {
      let val = $("#selectTbl").val()

      var style = val == 1 ? 'block' : 'none';
      document.getElementById('TblAdmin').style.display = style;
  
      var style = val == 2 ? 'block' : 'none';
      document.getElementById('TblMech').style.display = style;
  
      var style = val == 3 ? 'block' : 'none';
      document.getElementById('TblUser').style.display = style;
  
      var style = val == 4 ? 'block' : 'none';
      document.getElementById('TblBiz').style.display = style;
    })

Answer 2

// NiceSelect plugin
      $(document).ready(function(){
 
        $('#selectTbl').niceSelect();


      });

   document.getElementById('selectTbl').addEventListener('change', function () {
    $("#selectTbl").val();
    var style = $(this).val() == 1 ? 'block' : 'none';
    document.getElementById('TblAdmin').style.display = style;

    var style = $(this).val() == 2 ? 'block' : 'none';
    document.getElementById('TblMech').style.display = style;

    var style = $(this).val() == 3 ? 'block' : 'none';
    document.getElementById('TblUser').style.display = style;

    var style = $(this).val() == 4 ? 'block' : 'none';
    document.getElementById('TblBiz').style.display = style;
});

這樣對嗎？ @madprops