javascript - How to change drop-down value dynamically -
i need not in jquery. have bellow code , want changes.
if user select one/two(drop-down one) , hdb(drop-down second) want change boat quay, chinatown admiralty, alexandra road in third drop-down. 1 more thing want set one(drop-down one) default every time.
my code reference link: roblaplaca
i thankful if can me :)
<!doctype html> <html> <head> <title>custom styled selectbox</title> <link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customselectbox.css" /> </head> <body class="nojs"> <script type="text/javascript"> try{typekit.load();}catch(e){} var bodytag = document.getelementsbytagname("body")[0]; bodytag.classname = bodytag.classname.replace("nojs", "hasjs"); </script> <div class="grid-system clearfix"> <div class="row"> <div class="col span-9"> <div class="example clearfix"> <select class="custom interactive" id="properties"> <option value="selectone">select type</option> <option value="rfs">one</option> <option value="rfr">two</option> <option value="cfs">three</option> <option value="cfr">four</option> </select> <select class="custom interactive" id="typelist"> <option>one</option> <option>two</option> <option>three</option> <option>four</option> </select> <select class="custom"> <option value="">any</option> <option value="">boat quay</option> <option value="">chinatown</option> </select> </div> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="http://github.com/vitch/jscrollpane/raw/master/script/jquery.jscrollpane.js"></script> <script src="http://www.roblaplaca.com/docs/custom-selectbox/js/selectbox.js"></script> <script type="text/javascript"> $(function() { window.prettyprint && prettyprint() /* how initialization looks. typically it's $("select.custom"), make example more clear i'm breaking pattern , excluding interactive */ $("select.custom").not(".interactive").each(function() { var sb = new selectbox({ selectbox: $(this), height: 150, width: 200 }); }); /* adding functionality "interactive" selects */ var typelist = { selectone: ["select type"], rfs: ["any", "landed", "condominium", "hdb", "others"], rfr: ["any", "landed", "condominium", "hdb", "others"], cfs: ["any", "industrial", "retail", "land", "office", "others"], cfr: ["any", "industrial", "retail", "land", "office", "others"] } var defaultselectboxsettings = { height: 150, width: 150 }; var country_sb = null, city_sb = null; $("select.interactive").each(function() { if ($(this).attr("id") == "properties") { country_sb = new selectbox($.extend(defaultselectboxsettings, { selectbox: $(this), changecallback: function(val) { if (typelist[val]) { city_sb.enable(); updatecities(val); } if (val == "selectone") { city_sb.disable(); } } })); } else if ($(this).attr("id") === "typelist") { city_sb = new selectbox($.extend(defaultselectboxsettings, { selectbox: $(this) })); } }); updatecities($("#properties").val()); if ($("#properties").val() == "selectone") { //city_sb.disable(); } function updatecities(val) { var $select = $("select#typelist"), html = ""; (var = 0; < typelist[val].length; i++) { html += '<option>' + typelist[val][i] + '</option>'; } $select.html(html); // hack: chrome fast? settimeout(function() { city_sb.sync(); }, 1); } }); </script> </body> </html>
here's code snippet can use add options:
var newoption = document.createelement("option"); newoption.value="newvalue"; newoption.innerhtml = "option text"; $("#properties").append(newoption); to remove option use
$("#idoftheoption").remove(); just repeat objects want change.
since have arrays, do
$("#properties").html(""); for(var i=0; i<array.length;i++ ){ var newoption = document.createelement("option"); newoption.value=array[i]; newoption.innerhtml = array[i]; $("#properties").append(newoption); }
Comments
Post a Comment