在页面加载时根据字符中的字符隐藏选择选项答案

【问题标题】：Hide select option based on character in value on page load在页面加载时根据字符中的字符隐藏选择选项
【发布时间】：2019-05-07 12:22:49
【问题描述】：

我希望能够根据内容隐藏或去除选择框中的选项。选择框的内容由我无权访问的数据库填充，因此唯一的解决方案是隐藏该字段。在大多数浏览器中轻松完成，但 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>

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

这可能吗？

【问题讨论】：

请注意，您不能跨浏览器隐藏选项。值得注意的是，IE 或 Safari 也不支持。删除或禁用是选择

标签： javascript ios select hide option

【解决方案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>

【讨论】：

太棒了，谢谢，我试试看。我已经有js来应用css，但它不会隐藏IOS或Android中的值，所以这可能是天赐之物！

【解决方案2】：

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

【讨论】：