javascript - Make each option in a select list a hyperlink to a different page -

javascript - Make each option in a select list a hyperlink to a different page -

how can create every word select list hyperlink page?

when leaderboard select dynamically populated options (per code below), want create options clickable , have them redirect specified page.

<select id='standings' name='standings' onchange="listteam(this)"> <option value='0'>a</option> <option value='1'>b</option> <option value='2'>c</option> <option value='3'>d</option> </select> <select id='leaderboard' name='leaderboard' multiple="multiple" size="1" style="width: 100px;"> </select> <script type="text/javascript"> var teams = [ "x y z ", "e r t z u ", "w e r t", ], listteam = function listteam(sel) { var val = document.getelementbyid('standings').value, //get selected value team = teams[val], //get selected team, based on value lb = document.getelementbyid('leaderboard'); //get leaderboard select element lb.options.length = 0; var people = team.trim().split(/\s/); (var j = 0; j < people.length; j++) { var opt = document.createelement('option') opt.innertext = people[j]; lb.appendchild(opt); } }; listteam(); </script>

tested need alter array etc work rest, set urls within of 'value=' on <option>, on selection redirects window location

var teams = [ "x y z ", "e r t z u ", "w e r t", ]; var urls = ["www.a.com", "www.a1.com", "www.a2.com"]; listteam = function listteam(sel) { var val = document.getelementbyid('standings').value, //get selected value team = teams[val], //get selected team, based on value lb = document.getelementbyid('leaderboard'); //get leaderboard select lb.options.length = 0; var people = team.trim().split(/\s/); (var j = 0; j < people.length; j++) { var opt = document.createelement('option') opt.value = urls[j]; opt.innertext = people[j]; lb.appendchild(opt); } lb.onchange = function () { console.log("change"); if (this.selectedindex) { window.location.href = this.value; } } }; listteam();

html

<select id='standings' name='standings' onchange="listteam(this)"> <option value='0'>a</option> <option value='1'>b</option> <option value='2'>c</option> <option value='3'>d</option> </select> <select id='leaderboard' name='leaderboard' multiple="multiple" size="1" style="width: 100px;">

javascript html