onchange选择获取值并进行查询，然后在同一页面上显示结果

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

一旦用户点击BLGD1,系统将运行查询获取BLDG1的所有房间并在选择输入上显示查询

Result will look like this if user click on BLDG1

如果用户单击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

然后,一旦用户单击BLDG2,所有房间将显示在ROOM上。问题:如何在用户从其他信息中选择/更改建筑物编号后显示结果查询:Codeigniter HMVC; JQUERY

Thank you in advance.

先感谢您。

1 个解决方案

#1

You're looking for the onchange event. Here's a good jQuery-free solution:

你正在寻找onchange事件。这是一个很好的无jQuery解决方案:

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

在JSFiddle上查看它。

#1