如何链接多个选择？

我想链接我的选择根据Mika Tuupolas的指导Chained Selects。如何链接多个选择？

这里是我的代码：

! 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; 
 
     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 just 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>

所以，我想有链接到对方的选择。

来源

2016-11-08 Viktor Olsson

我想你误解了你必须链接select元素在一起的顺序。尝试做这种方式：

<script charset="utf-8"> 
$(function() { 
    $("#type").chainedTo("#make"); 
    $("#engine").chainedTo("#type"); 
}); 
</script>

还有你select定义一个错字，解决这个问题是这样的：<select name="engine" id="engine">。

最后，你需要定义引擎选择类，这里有一个例子：

<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>

我希望这有助于！

来源

2016-11-08 13:01:16 ILadis

如何链接多个选择？

回答

相关问题