jQuery或Javascript獲取帶有值的選擇選項陣列以隱藏元素-有解無憂

我正在研究如何從具有特定值的選擇下拉串列中獲取一組選項元素，然后我將隱藏它們。

到目前為止，我的 HTML 是：

<select>
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM</option>
<option value="4">4 AM</option>
<option value="5">5 AM</option>
<option value="6">6 AM</option>
<option value="7">7 AM</option>
<option value="8">8 AM</option>
<option value="9">9 AM</option>
</select>

我想要做的是獲得具有某些數字值的某些選項并隱藏它們。
應該足夠簡單。

我打算這樣做的冗長的方式。會是這樣的：

 $('option[value="1"],option[value="2"],option[value="3"],option[value="6"]').remove();

但是，一旦我在選項串列中生成了更多值，那將是不可持續的。

我將如何使用我需要的值創建我需要的元素陣列，然后使用 .remove() 洗掉元素。

謝謝

更新/編輯 - 問題的第二部分：（在下面回答了我自己的解決方案）

使用基于另一個解決方案 [https://stackoverflow.com/questions/63804234/jquery-filter-select-options-by-array] 的作業，大部分作業......但見下文。

  var myArray = ["0800", "0805", "0810", "0815", "0820", "0825", "0830", "0835", "0840" ]; 
    // this goes by a step of 5 from 0800 to 1000
        $("#sessionStartTime option").filter(function () 
       {
           return $.inArray($(this).val(), testArray) > -1;
        }).remove();

也就是說，問題的第二部分比。

有沒有辦法獲得一個時間范圍或一個數字范圍，并將它們作為數字扔到一個陣列中。你會看到我所擁有的值正在回歸我認為的“八進制”。但在回傳陣列中，它回傳不帶前導“0”的數字。

我已經查找了幾種方法，但似乎沒有做我需要做的事情。我考慮過使用 '.contains()' 或類似的東西，但不知道如何實作它。我無法控制構建串列的值，因為這些值來自填充選擇選項串列的 JSON 呼叫。

這是我目前范圍內的內容，但前導零被省略，但需要前導零來過濾選項。基于此示例 [https://jasonwatmore.com/post/2021/10/02/vanilla-js-create-an-array-with-a-range-of-numbers-in-a-javascript]

const end = 1000;
        const start = 0800;
        const step = 5;
        const arrayLength = Math.floor(((end - start) / step))   1;
        var timeArray = [...Array(arrayLength).keys()].map(x => (x * step)   start);
        console.log("timeArray:"   timeArray);
   //Returns numbers without leading zeros but I need the leading zeros

uj5u.com熱心網友回復：

在這里，我將包含一個冗長的示例和一個簡短的版本。要將這一切包裝在一個陣列中，只需將其放入您呼叫的函式中，并傳遞您希望洗掉的值陣列。

let excludeNumbers = [1, 4, 6, 8, 22];
var opts = $("#good-stuff")
  .find('option');
console.log(opts.length);
var found = opts.filter(function(idx, elem) {
  // console.log(idx, elem);
  let myval = this.value * 1; //faster than parse
  // console.log(myval);
  let isIt = excludeNumbers.includes(myval);
  console.log(isIt);
  return isIt;
});
console.log(opts.length, found.length);
found.remove();

// short form
$("#short-stuff")
  .find('option')
  .filter(function() {
    return excludeNumbers.includes(this.value * 1);
  }).remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="good-stuff">
  <option value="1">1 AM</option>
  <option value="2">2 AM</option>
  <option value="3">3 AM</option>
  <option value="4">4 AM</option>
  <option value="5">5 AM</option>
  <option value="6">6 AM</option>
  <option value="7">7 AM</option>
  <option value="8">8 AM</option>
  <option value="9">9 AM</option>
</select>

<select id="short-stuff">
  <option value="1">1 AM</option>
  <option value="2">2 AM</option>
  <option value="3">3 AM</option>
  <option value="4">4 AM</option>
  <option value="5">5 AM</option>
  <option value="6">6 AM</option>
  <option value="7">7 AM</option>
  <option value="8">8 AM</option>
  <option value="9">9 AM</option>
</select>

替代版本：不要洗掉它們，只需通過設定一個值來隱藏它們并讓 CSS 完成作業。

let excludeNumbers = [1, 4, 6, 8, 22];

$("#good-stuff").on('hide-them', function(event, data) {
  $(this).find('option')
    .filter(function() {
      let t = data.a.includes(this.value * 1);
      let x = t ? "hide" : "show";
      this.dataset.isvisible = x;
      return !t;
    })
    // just to make the css work by changing the selected option
    .first().prop("selected", true);
});

$("#good-stuff").trigger('hide-them', [{
  "a": excludeNumbers
}]);

// now we trigger the new options:
$("#change-up").on('click', function() {
  $("#good-stuff").trigger('hide-them', [{
    "a": [3, 7, 8]
  }]);
});

.#good-stuff option {
  display: block;
}

#good-stuff option[data-isvisible="hide"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="good-stuff">
  <option value="1">1 AM</option>
  <option value="2">2 AM</option>
  <option value="3">3 AM</option>
  <option value="4">4 AM</option>
  <option value="5">5 AM</option>
  <option value="6">6 AM</option>
  <option value="7">7 AM</option>
  <option value="8">8 AM</option>
  <option value="9">9 AM</option>
</select>

<button id="change-up" type="button">Change them</button>

uj5u.com熱心網友回復：

如果您有一個匹配值字串的陣列，請使用Array.prototype.includes

const hideHours = ["1", "2", "3", "6", "7"];

document.querySelectorAll("option")
  .forEach(el => el.hidden = hideHours.includes(el.value));

<select>
  <option value="1">1 AM</option>
  <option value="2">2 AM</option>
  <option value="3">3 AM</option>
  <option value="4">4 AM</option>
  <option value="5">5 AM</option>
  <option value="6">6 AM</option>
  <option value="7">7 AM</option>
  <option value="8">8 AM</option>
  <option value="9">9 AM</option>
</select>

只是，請確保您的選擇器更具體，而不是document.querySelectorAll("option")嘗試通過 ID 來定位特定的 Select Elementdocument.querySelectorAll("#hours option")

uj5u.com熱心網友回復：

這是我想出的答案。感謝所有的幫助。

// HTML
 <select id="sessionStartTime">
  <option value="0800">8:00 am</option>
<option value="0805">8:05 am</option>
<option value="0810">8:10 am</option>
<option value="0815">8:15 am</option>  
// .....ALL THE WAY UP TO 10:00 AM AND VALUE OF 1000
</select>


  //Javascript
           const end = 1000;
            const start = 0800;
            const step = 5;
            const arrayLength = Math.floor(((end - start) / step))   1;
            var timeArray = [...Array(arrayLength).keys()].map(x => (x * step)   start); //TODO: NEED TO GET THIS TO KEEP THE LEADING ZERO FOR REMOVAL
            console.log("timeArray:"   timeArray);
            var newTimeArr = [];
            $.each(timeArray, function (i, numb) {
                newTimeArr.push("0"   numb);//add the zero and push to new array
            });

            $("#sessionStartTime option").filter(function () {
                return $.inArray($(this).val(), newTimeArr) > -1;
            }).remove();

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

標籤：javascript html jQuery

上一篇：我得到null作為參考單選按鈕的值

下一篇：物件作為React子級無效。如果您打算渲染一組子項，請改用陣列。如何退貨？