Question

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

Answer 2

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

根据页面加载时的值来隐藏选择选项

2 个答案: