根据页面加载时值中的字符隐藏 select 选项

Question

我希望能够根据内容隐藏或删除 select 框中的选项。 select 框的内容由我无法访问的数据库填充，因此唯一的解决方案是隐藏该字段。在大多数浏览器中很容易完成，但 android 和 IOS 忽略 css 中的 display:none。

代码如下：

<select id="variant2" name="variant2">
<option value="Size" selected="">Select Size / Option</option>
          <option value="SMALL|15004">SMALL </option>
          <option value="MEDIUM *|15005" style="display: none; visibility: hidden;">MEDIUM *</option>
          <option value="LARGE *|15006" style="display: none; visibility: hidden;">LARGE * </option>
          <option value="XLARGE|15007">XLARGE </option>
          <option value="2XL|15008">2XL </option>
          <option value="3XL|15009">3XL </option>
         </select>

基本上我想禁用/隐藏/删除值中包含星号 (*) 的选项，因为它们的尺码已缺货。

这可能吗？

Answer 1

您可以遍历 JavaScript 中的选项列表，并将不包含星号的项目输出到您的 select。

Answer 2

您可以获得所有 option 元素，遍历它们，并检查字符串是否包含 *，如果包含，则应用样式。

document.querySelectorAll("option").forEach((x)=>{
 if(x.innerText.includes("*")){
     x.style.display = 'none';
            x.style.visibility = 'none';
        }
})

<select id="variant2" name="variant2">
    <option value="Size" selected="">Select Size / Option</option>          
    <option value="SMALL|15004">SMALL </option>
    <option value="MEDIUM *|15005">MEDIUM *</option>
    <option value="LARGE *|15006">LARGE * </option>
    <option value="XLARGE|15007">XLARGE </option>
    <option value="2XL|15008">2XL </option>
    <option value="3XL|15009">3XL </option>
 </select>

编辑：如果您不想应用 css，您可以使用 removeChild():

删除元素

let variant2 = document.getElementById('variant2')
let children = Array.from(variant2.children)
children.forEach((x)=>{ x.innerText.includes("*") && variant2.removeChild(x) });

<select id="variant2" name="variant2">
    <option value="Size" selected="">Select Size / Option</option>          
    <option value="SMALL|15004">SMALL </option>
    <option value="MEDIUM *|15005">MEDIUM *</option>
    <option value="LARGE *|15006">LARGE * </option>
    <option value="XLARGE|15007">XLARGE </option>
    <option value="2XL|15008">2XL </option>
    <option value="3XL|15009">3XL </option>
 </select>

根据页面加载时值中的字符隐藏 select 选项

Hide select option based on character in value on page load

javascript

ios

select

hide

option