javascript - How do I chain multiple selects? -
i'm trying chain selects according mika tuupolas' guide chained selects.
here code:
! function(a, b) { "use strict"; a.fn.chained = function(c) { return this.each(function() { function d() { var d = !0, g = a("option:selected", e).val(); a(e).html(f.html()); var h = ""; a(c).each(function() { var c = a("option:selected", this).val(); c && (h.length > 0 && (h += b.zepto ? "\\\\" : "\\"), h += c) }); var i; = a.isarray(c) ? a(c[0]).first() : a(c).first(); var j = a("option:selected", i).val(); a("option", e).each(function() { a(this).hasclass(h) && a(this).val() === g ? (a(this).prop("selected", !0), d = !1) : a(this).hasclass(h) || a(this).hasclass(j) || "" === a(this).val() || a(this).remove() }), 1 === a("option", e).size() && "" === a(e).val() ? a(e).prop("disabled", !0) : a(e).prop("disabled", !1), d && a(e).trigger("change") } var e = this, f = a(e).clone(); a(c).each(function() { a(this).bind("change", function() { d() }), a("option:selected", this).length || a("option", this).first().attr("selected", "selected"), d() }) }) }, a.fn.chainedto = a.fn.chained, a.fn.chained.defaults = {} }(window.jquery || window.zepto, window, document);<!doctype html> <html> <head> <title>vinn en bil!</title> <link rel="stylesheet" type="text/css" href="form.css"> <meta charset="uft-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.chained.min.js"></script> </head> <body> <div id="maincontainer"> <div id="topsection"> <div class="innertube"> <h1> vinn en bil </h1> <hr> </div> </div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="innertube"> <form> <fieldset class="fieldset"> <legend>om du vann?</legend> <table> <tr> <td>välj en bil</td> <td> <div class="form-group"> <select name="make" id="make"> <option value="">välj en volvo typ</option> <option value="xc">xc</option> <option value="v">v</option> <option value="s">s</option> <option value="laddhybrider">laddhybrider</option> </select> </div> </td> <td> <div class="from-group"> <select name="type" id="type"> <option value="" class="">välj en volvo model</option> <option value="xc90" class="xc">xc90</option> <option value="xc60" class="xc">xc60</option> <option value="v60 cross country" class="v">v90 cross country</option> <option value="v90" class="v">v90</option> <option value="v60 cross country" class="v">v60 cross country</option> <option value="v60" class="v">v60</option> <option value="v40 cross country" class="v">v40 cross country</option> <option value="v40" class="v">v40</option> <option value="s90" class="s">s90</option> <option value="s60 cross country" class="s">s60 cross country</option> <option value="s60" class="s">s60</option> <option value="xc90 t8 twin engine" class="laddhybrider">xc90 t8 twin engine</option> <option value="v60 d6 twin engine" class="laddhybrider">v60 d6 twin engine</option> <option value="v60 d5 twin engine" class="laddhybrider">v60 d5 twin engine</option> </select> </div> </td> <td> <div class="form-group"> <select name="engine" id="enigne"> <option value="">välj motor</option> <option value="tacoma">tacoma</option> <option value="tundra">tundra</option> </select> </div> </td> </tr> </table> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script charset="utf-8"> $(function() { $("#make").chainedto("#type"); $("#type").chainedto("#engine"); }); </script> <br> <label> <p>varför du ska vinna:</p> </label> <textarea rows="20" cols="60"></textarea> <br> <br> <label></label> <input type="submit" value="klar" onclick="alert('tack för ditt deltagande!')"> <input type="reset"> </fieldset> </form> </div> </div> </div> </div> </body> </html>so, want have selects chained each other.
i think misunderstood order in have chain select elements together. try doing way:
<script charset="utf-8"> $(function() { $("#type").chainedto("#make"); $("#engine").chainedto("#type"); }); </script> there's typo in select definition, fix this: <select name="engine" id="engine">.
at last need define classes engine selection, here's example:
<select name="engine" id="engine"> <option value="">välj motor</option> <option value="tacoma" class="xc90 v60 v40">tacoma</option> <option value="tundra" class="s90 s60">tundra</option> </select> i hope helps!
Comments
Post a Comment