[英]Javascript - Disable Select Option Elements Based on Selected Option
[英]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>
如果免费座位为零,我们会使用vanilla 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选项: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.