Guys I have a problem which I know it's possible to do but not sure how to do it. Any help is much appreciated.
CODE:
<select id='bldg'>
<option value='1'>BLDG1</option>
<option value='2'>BLDG2</option>
</select>
once the user click on BLGD1 the system will run a query getting all rooms of BLDG1 and display the query on a select input too
Result will look like this if user click on BLDG1
<select id='room'>
<option value='101'>Room 101 - BLDG1</option>
<option value='102'>Room 102 - BLDG1</option>
</select>
and then once the user click BLDG2, all the rooms will display on ROOM. Question: How to display result query on after users choose/change a building number from other info: Codeigniter HMVC; JQUERY
Thank you in advance.
You're looking for the onchange
event. Here's a good jQuery-free solution:
// Grab the element
var sel = document.querySelector('#bldg');
// Store updated values
var updatedVals = [ "Room 101 - BLDG1", "Room 102 - BLDG2" ];
// Sets an onchange event function
// Alternative: sel.addEventListener('onchange', fn() { ... })
sel.onchange = function() {
// this.children returns a DOMNodeList, calling slice converts it to a proper array
var options = Array.prototype.slice.call(this.children, 0);
// Map/Loop over the array
options.map(function(option, i){
// Change innerHTML of each option to the corresponding updated value
option.innerHTML = updatedVals[i];
});
}
Check it out on JSFiddle.