Question

场景：用户通过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来做。有什么想法吗？

Answer 1

它相当直接..

首先在你的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]))
}

Answer 2

假设select中的选项顺序对应于table元素内的顺序，你可以简单地做这样的事情。

＆＃13;

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])
  }
})

＆＃13;

<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>

＆＃13;

使用纯JavaScript禁用基于innerhtml的选择选项

2 个答案: