dimanche 14 mai 2017

Two select drop-down with category in JavaScript

sample database

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>

I have these two dropdown select in which the first dropdown is the holder or sort of category that once click, the list that belongs to this will display it.For example base from the database value,if i select Cebu,all the schools that belong to Cebu schould display in the second dropdown. Dont mind my current script because it is wrong.The code must expect multiple data so the second dropdown must display all the data not just limitting the view to 4 items. I am not really familiar with javascript.Anyone could help me construct the javascript?NOT the AJax please because its more complicated to me.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire