drop down menu - Javascript Go button -
i create go button current code, don't know how.
jquery(function($) { var data = [ // data ['select province', [ 'select city' ]], ['alberta', [ 'select city', 'airdrie', 'calgary', 'cold lake', 'edmonton', 'fort saskatchewan', 'grande prairie', 'leduc', 'lethbridge', 'medicine hat', 'red deer' ]], ['british columbia', [ 'select city', 'abbotsford', 'burnaby', 'chilliwack', 'coquitlam', 'kamloops', 'langley', 'nanaimo', 'new westminister', 'north vancouver', 'port coquitlam', 'port moody', 'prince george', 'richmond', 'surrey', 'vancouver', 'vernon', 'victoria' ]], ['manitoba', [ 'select city', 'brandon', 'dauphin', 'flin flon', 'morden', 'portage la prairie', 'selkirk', 'steinbach', 'thompson', 'winkler', 'winnipeg' ]], ['new brunswick', [ 'select city', 'bathurst', 'campbellton', 'dieppe', 'edmundston', 'fredericton', 'miramichi', 'moncton', 'saint john' ]], ['newfoundland , labrador', [ 'select city', 'corner brook', 'mount pearl', 'st. johns' ]], ['northwest territories', [ 'select city', 'fort simpson', 'inuvik', 'sachs harbour', 'yellowknife' ]], ['nova scotia', [ 'select city', 'amherst', 'cape breton', 'glace bay', 'halifax', 'kentville', 'new glasgow', 'sydney mines', 'truno' ]], ['nunavut', [ 'select city', 'alert', 'eureka', 'iqaluit' ]], ['ontario', [ 'select city', 'barrie', 'belleville', 'brampton', 'brant', 'brantford', 'brockville', 'burlington', 'cambridge', 'cornwall', 'elliot lake', 'guelph', 'haldimand county', 'hamilton', 'kawartha lakes', 'kenora', 'kingston', 'kitchener', 'london', 'markham', 'mississauga', 'niagara falls', 'norfolk county', 'north bay', 'orillia', 'oshawa', 'ottawa', 'owen sound', 'peterborough', 'pickering', 'quinte west', 'sarnia', 'sault ste. marie', 'st. catherines', 'st.thomas', 'stratford', 'sudbury', 'thunder bay', 'timmons', 'toronto', 'vaughan', 'waterloo', 'welland', 'windsor', 'woodstock' ]], ['prince edward island', [ 'select city', 'charlottetown', 'summerside' ]], ['quebec', [ 'select city', 'alma', 'baie-comeau', 'beaconsfield', 'beloeil', 'blainville', 'boisbriand', 'gatineau', 'laval', 'longueuil', 'lévis', 'montreal', 'quebec city', 'repentigny', 'saguenay', 'saint-jean-sur-richelieu', 'sherbrooke', 'terrebonne', 'trois-rivières' ]], ['saskatchewan', [ 'select city', 'estevan', 'lloydminster', 'moose jaw', 'prince albert', 'regina', 'saskatoon', 'swift current', 'yorkton' ]], ['yukon', [ 'select city', 'carmacks', 'dawson city', 'faro', 'haines junction', 'mayo', 'teslin', 'watson lake', 'whitehorse' ]] ]; $a = $('#a'); // dropdowns $b = $('#b'); for(var = 0; < data.length; i++) { var first = data[i][0]; $a.append($("<option>"). // add options attr("value",first). data("sel", i). text(first)); } $a.change(function() { var index = $(this).children('option:selected').data('sel'); var second = data[index][1]; // second-choice data $b.html(''); // clear existing options in second dropdown for(var j = 0; j < second.length; j++) { $b.append($("<option>"). // add options attr("value",second[j]). data("sel", j). text(second[j])); } }).change(); // trigger once add options @ load of first choice });
it consists of 2 drop downs, first choice province in second drop down shows cities province. user choose city click go button when they've made choice, go link of choosing.
please if help, great!
thanks
the code bit complex, it's this:
code below well.
html:
<select id="one"></select> <select id="two"><option><- select province</option></select><br /> <button id="button">go</button><br /> <div id="log"></div>
jquery:
for (i=0;i<data.length;i++) { $("#one").append( $("<option>") .attr("value",i) .text(data[i][0]) ); } $("#one").on("change",function(){ var val = $("#one").val(); var prov = data[val][1]; $("#two").empty(); (i=0;i<prov.length;i++){ $("#two").append( $("<option>").attr("value",prov[i]).text(prov[i]) ); } }); $("#two").on("change",function(){ var val = $("#two").val(); $("#button").off("click").on("click",function(){ //window.location = val; //customize url here. //temporary demonstrate: $("#log").text(val); }); });
Comments
Post a Comment