Question

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

所以，我希望将选择链接到彼此。

Answer 1

我认为您误解了将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>

我希望这有帮助！

如何链接多个选择？

1 个答案: