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
Post a Comment