javascript - 在页面加载时隐藏基于字符值的选择选项

Question

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

代码如下:

<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

您可以获取所有 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>