阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.chained 中文API文档

      插件 jQuery.chained 中文API文档

      源码 & 下载

      适用场景

      插件特点

      链接是链接选择的简单插件。它适用于jQuery和Zepto。您可以选择两个不同的版本。使用jquery.chained.js,如果你不希望使外部查询设置孩子选择的内容。此版本使用数据attirbutes来决定内容。

      对于更复杂的场景,维护数据属性会变得很麻烦。此外,如果您想要对数据库使用进行查询jquery.chained.remote.js。此版本生成外部AJAX查询,并使用返回的JSON构建子选择。

      基本用法

      子选择链接到父选择。所有选择必须具有id属性。子选择选项必须具有与父选择的选项值匹配的类名。当用户在父选择中选择某些内容时,将更新子选择中的选项。具有匹配的类名与父项当前选定选项的选项将保持可见。其他人都隐藏了。

      首先,您必须在代码中包含jQuery或Zepto和Chained:

      <script src="jquery.js"></script>
      <script src="jquery.chained.js"></script>
      

      如果您使用的是Zepto,则还必须包含可选的选择器模块。

      <script src="zepto.js"></script>
      <script src="zepto-selector.js"></script>
      <script src="jquery.chained.js"></script>
      

      然后我们假设您有以下HTML代码:

      <select id="mark" name="mark">
          <option value="">--</option>
          <option value="bmw">BMW</option>
          <option value="audi">Audi</option>
      </select>
      <select id="series" name="series">
          <option value="">--</option>
          <option value="series-3" data-chained="bmw">3 series</option>
          <option value="series-5" data-chained="bmw">5 series</option>
          <option value="series-6" data-chained="bmw">6 series</option>
          <option value="a3" data-chained="audi">A3</option>
          <option value="a4" data-chained="audi">A4</option>
          <option value="a5" data-chained="audi">A5</option>
      </select>
      

      您现在可以将系列链接到标记。有两种不同的方法可以做到这一点。如果您喜欢更喜欢英文或更短的版本,请选择自己。我更喜欢较短的版本。

      $("#series").chained("#mark"); /* or $("#series").chainedTo("#mark");

      链接到多个Parent

      一个孩子可以有两个父母。子链接到多个父项的可用选项取决于父项选择值中的一个或两个。要使子选择取决于父母双方的值,请使用数据属性first+second。

      这是第四个选择的代码。请注意柴油发动机如何仅适用于BMW 3和5系轿车。这是通过使用类名series-3+sedan和series-5+sedan。

      <select id="engine" name="engine">
          <option value="">--</option>
          <option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
          <option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
          <option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>
      </select>
      
      $("#series").chained("#mark");
      $("#model").chained("#series");
      $("#engine").chained("#series, #model");
      

      用于AJAX

      使用远程版本使用远程版本与上面解释的类似。首先包括jQuery或Zepto和Chained的远程版本:

      <script src="jquery.js"></script>
      <script src="jquery.chained.remote.js"></script>
      

      在HTML中,您只需要为第一个选择提供选项标签。其他选择的内容将由AJAX请求返回的JSON构建。当父选择的值发生更改时,将完成AJAX请求。

      <select id="mark" name="mark">
          <option value="">--</option>
          <option value="bmw">BMW</option>
          <option value="audi">Audi</option>
      </select>
      <select id="series" name="series">
          <option value="">--</option>
      </select>
      <select id="model" name="model">
          <option value="">--</option>
      </select>
      <select id="engine" name="engine">
          <option value="">--</option>
      </select>
      

      在代码中,您必须使用remoteChained()方法。第二个参数是发送AJAX请求的URL。

      $("#series").remoteChained({
          parents : "#mark",
          url : "/api/series"
      });
      
      $("#model").remoteChained({
          parents : "#series",
          url : "/api/models"
      });
      
      $("#engine").remoteChained({
          parents : "#series, #model",
          url : "/api/engines"
      });
      

      当在父选择上触发更改事件时,将GET请求发送到给定的URL。此请求包括查询字符串中父级的名称和值。例如,当用户在第一次选择中选择BMW时,会发出以下请求:

      GET http://example.com/api/series?mark=bmw
      

      JSON数据格式

      默认情况下,链接可以处理两种不同格式的JSON响应。包含键+值对的对象很容易生成。但是,JavaScript中对象的属性没有顺序。根据浏览器选择选项可能会出现在不同的顺序。

      {
          "" : "--",
          "series-1" : "1 series",
          "series-3" : "3 series",
          "series-5" : "5 series",
          "series-6" : "6 series",
          "series-7" : "7 series",
          "selected" : "series-6"
      }
      
      

      如果要将服务器端上的条目排序为特定顺序,请使用对象数组。

      [
          { "" : "--" },
          { "series-1" : "1 series" },
          { "series-3" : "3 series" },
          { "series-5" : "5 series" },
          { "series-6" : "6 series" },
          { "series-7" : "7 series" },
          { "selected" : "series-6" }
      ]
      

      如果您正在访问第三方数据源并且无法控制数据结构,则可以使用该data功能。它应该变异并以上述格式之一返回json数据。下面的示例显示了如何将命名空间数据变为插件所理解的格式。

      {
          "data": [
              { "" : "--" },
              { "series-1" : "1 series" },
              { "series-3" : "3 series" },
              { "series-5" : "5 series" },
              { "series-6" : "6 series" },
              { "series-7" : "7 series" },
              { "selected" : "series-6" }
          ]
      }
      
      $("#series").remoteChained({
          parents : "#mark",
          url : "/api/series",
          data: function (json) {
              return json.data;
          }
      });
      
      目录
      目录