根据页面加载时值中的字符隐藏 select 选项
Hide select option based on character in value on page load
我希望能够根据内容隐藏或删除 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>
基本上我想禁用/隐藏/删除值中包含星号 (*) 的选项,因为它们的尺码已缺货。
这可能吗?
您可以遍历 JavaScript 中的选项列表,并将不包含星号的项目输出到您的 select
。
您可以获得所有 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 框中的选项。 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>
基本上我想禁用/隐藏/删除值中包含星号 (*) 的选项,因为它们的尺码已缺货。
这可能吗?
您可以遍历 JavaScript 中的选项列表,并将不包含星号的项目输出到您的 select
。
您可以获得所有 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>