使用纯JavaScript禁用基于innerhtml的选择选项
Disable select option based on innerhtml with pure JavaScript
场景:用户通过HTML表单投票决定乘坐公共汽车进行实地考察。有三个选项:
<select id="selectbox">
<option>Berlin</option>
<option>Munich</option>
<option>Cologne</option>
</select>
($tour是保存空闲座位的数组)
<table class="status">
<tr><td>Berlin: <span id="t1">available (<?php echo $tour[0]; ?> seats)</span></td></tr>
<tr><td>Munich: <span id="t2">available (<?php echo $tour[1]; ?> seats)</span></td></tr>
<tr><td>Cologne: <span id="t3">available (<?php echo $tour[2]; ?> seats)</span></td></tr>
</table>
如果空闲座位为0,我们使用普通JavaScript显示"对不起,已预订"信息:
// get content of status table
var t1 = document.getElementById("t1").innerHTML;
var t2 = document.getElementById("t2").innerHTML;
var t3 = document.getElementById("t3").innerHTML;
var bookedout = "sorry, booked out!"
// check if condition is met
if (t1 == "available (0 seats)") {
document.getElementById("t1").innerHTML = bookedout;
}
if (t2 == "available (0 seats)") {
document.getElementById("t2").innerHTML = bookedout ;
}
if (t3 == "available (0 seats)") {
document.getElementById("t3").innerHTML = bookedout ;
}
工作好。然而,现在到了我有点迷路的部分。上述条件还应该根据选项的innerHTML从#selectbox 中删除相应的选项。在jQuery中,我会使用#selectbox option:contains('stringhere')。
然而,我想用最纯粹的JavaScript来做。什么好主意吗?
这是相当直接的…
首先在你的html
中给你的选项赋值:
<select id="selectbox">
<option>Berlin</option>
<option>Munich</option>
<option>Cologne</option>
</select>
然后在js中:
var mySelect = document.getElementById("selectbox");
//function to get option values as array
function getOptionsArr() {
var optionsArray =[],options = mySelect.options;
var i = 0, len = options.length;
// store the options value in an array
while (i < len)
{
optionsArray.push(options[i++].value);
}
return optionsArray;
}
var t1 = document.getElementById("t1").innerHTML;
var t2 = document.getElementById("t2").innerHTML;
var t3 = document.getElementById("t3").innerHTML;
var bookedout = "sorry, booked out!"
// check if condition is met
if (t1 == "available (0 seats)"){
document.getElementById("t1").innerHTML = bookedout;
//this will get the whole parent node and child node inner text we split at : and get the value
var textArr = document.getElementById("t1").parentElement.innerText.split(':');
// find the index of value from our array created above and remove that option from select
mySelect.remove(getOptionsArr().indexOf(textArr [0]))
}
//repeat the same for other
if (t2 == "available (0 seats)"){
document.getElementById("t2").innerHTML = bookedout ;
var textArr = document.getElementById("t2").parentElement.innerText.split(':');
mySelect.remove(getOptionsArr().indexOf(textArr [0]))
}
if (t3 == "available (0 seats)"){
document.getElementById("t3").innerHTML = bookedout ;
var textArr = document.getElementById("t3").parentElement.innerText.split(':');
mySelect.remove(getOptionsArr().indexOf(textArr [0]))
}
另外你可以用
来重构它var mySelect = document.getElementById("selectbox");
//function to get option values as array
function getOptionsArr() {
var optionsArray =[],options = mySelect.options;
var i = 0, len = options.length;
// store the options value in an array
while (i < len)
{
optionsArray.push(options[i++].value);
}
return optionsArray;
}
var t1 = document.getElementById("t1").innerHTML;
var t2 = document.getElementById("t2").innerHTML;
var t3 = document.getElementById("t3").innerHTML;
var bookedout = "sorry, booked out!"
// check if condition is met
if (t1 == "available (0 seats)"){
doUpdateDOM("t1")
}
if (t2 == "available (0 seats)"){
doUpdateDOM("t2")
}
if (t3 == "available (0 seats)"){
doUpdateDOM("t3")
}
function doUpdateDOM(nodeID){
document.getElementById(nodeID).innerHTML = bookedout;
var textArr = document.getElementById(nodeID).parentElement.innerText.split(':');
mySelect.remove(optionsArray.indexOf(textArr [0]))
}
假设select中选项的顺序与table元素中的顺序相对应,您可以简单地执行如下操作:
var select = document.getElementById('selectbox');
var table = document.getElementsByClassName('status').item(0);
var rows = table.rows;
var bookedout = " sorry, booked out!";
// check whether an option is bookedout
// and save its state to a new array.
var bookedOutState = [].slice.call(rows).map(function(row) {
var match = row.children[0].textContent.match(/'d/);
if (+match[0] === 0) {
row.children[0].textContent = match['input'].substr(0, match['input'].indexOf(':') + 1) + bookedout;
return false;
}
return true;
})
// go over the new created array and remove
// options from select according to the saved state.
bookedOutState.forEach(function(state, idx) {
if (!state) {
select.removeChild(select.children[idx])
}
})
<select id="selectbox">
<option>Berlin</option>
<option>Munich</option>
<option>Cologne</option>
</select>
<table class="status">
<tr><td>Berlin: <span id="t1">available 0 seats</span></td></tr>
<tr><td>Munich: <span id="t2">available 1 seats</span></td></tr>
<tr><td>Cologne: <span id="t3">available 2 seats</span></td></tr>
</table>
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 转义符不能与innerHTML一起使用
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 当我更改innerHtml时,引导选项卡事件不再工作
- 如何通过 innerHTML 设置选择标签选项
- IE9 问题:动态创建(通过 innerHTML)选项按钮和复选框不起作用
- Innerhtml 在 Mozilla 和 Chrome 中不保留 Selectbox 和 Radio 的选定选项,但在
- 如何使用jquery或javascript使用选定的下拉选项文本设置innerhtml
- 打开一个新的选项卡,并使用javascript用父页面的innerHTML填充页面
- innerHTML标记选项没有'我不在IE9工作
- 在IE中使用.innerHTML添加选项元素无效
- 在IE中使用. innerhtml添加选项元素
- 试图在Chrome扩展选项页面显示警报,但得到"不能设置属性'innerHTML'undefi
- 使用纯JavaScript禁用基于innerhtml的选择选项