html - Disable select option based on innerhtml with pure JavaScript -


scenario: user votes via html form field trip take on bus. there 3 options:

    <select id="selectbox">       <option>berlin</option>       <option>munich</option>       <option>cologne</option>     </select> 

the free bus seats stored in / read database: ($tour our array keeping free seats)

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

if free seats zero, display "sorry, booked out" info using vanilla javascript:

// 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 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 ; } 

works fine. however, comes part i'm bit lost. above condition should delete respective option #selectbox based on option's innerhtml. in jquery i'd go #selectbox option:contains('stringhere').

however, wanna in purest of javascript. ideas?

assuming order of options inside select correspond order inside table element this.

var select = document.getelementbyid('selectbox');  var table = document.getelementsbyclassname('status').item(0);  var rows = table.rows;  var bookedout = " sorry, booked out!";    // check whether option bookedout  // , save state 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 on new created array , remove  // options select according 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>


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -