两个 select 下拉列表,类别在 JavaScript 中

Two select drop-down with category in JavaScript

样本数据库

Location
    location_id     location
    1           Bacolod
    2           Bohol
    3           Cebu
    4           Manila

School

id      location_id     School_name
1           1               Bacolod Tay Tung High School
2           3               University of Southern Philippines Foundation
3           2               Dr. Cecilio Putong National High School
4           1               Jack and Jill School
5           4               British School Manila
6           2               Holy Spirit School of Tagbilaran
7           4               Chinese International School Manila
8           2               Ubay National Science High School
9           3               Abellana National School


<select onChange="jsFunction()" id="team1" >
@foreach($locations as $location)
<option onclick="jsFunction()">{!! $location->location_name!!}</option>
@endforeach
</select>


<select id="team2">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>

<script>
function jsFunction(){
    var team1 = document.getElementById( "team1" );
    var team2 = document.getElementById( "team2" );
    for (i=0;i<4;i++){
        team2.remove(0);
    }
    var position=0;
    for (i=0;i<4;i++){
        if (i!=team1.selectedIndex){
            team2.options[position] = new Option(team1.options[i].value);
            position=position+1;
        }
    }
}
</script>

我有这两个下拉列表 select 其中第一个下拉列表是持有人或点击一次的类别,属于这个的列表 将从数据库值中显示 it.For 个示例库,如果我 select 宿务,所有属于宿务的学校都应显示在第二个下拉列表中。 不要介意我当前的脚本,因为它是 wrong.The 代码必须期望多个数据,因此第二个下拉列表必须显示所有数据,而不仅仅是限制 视图到 4 个项目。 我不太熟悉 javascript.Anyone 可以帮助我构建 javascript 吗?请不要 AJax 因为它对我来说更复杂。

您可以参考 my document in here.