如何在同一个表单中处理多个Jquery + Ajax依赖的选择框

How to handle multiple Jquery + Ajax dependent select boxes in the same form

本文关键字：Ajax Jquery 依赖 选择 同一个 表单 处理      更新时间：2023-09-26

我不知道如何处理在使用jquery和ajax的表单中有多行链接选择框。

有很多可用的教程解释如何创建一个链式选择实例，但不幸的是(至少对我来说)他们从来没有讨论如何在表单中处理多个链式选择实例/行。

我可以通过显式地编写不同的jquery代码块来使其工作，如下所示，但我的问题是，可以有任意数量的链接选择行，将自动生成。

要处理这个问题，我需要一个jquery代码块，可以工作在所有的行链接选择。到目前为止，我所尝试的所有结果都是典型的新手问题，即除了第一行之外，无法让任何一行链接选择框工作。

这里是html:

<form>
    Connection Type :
    <select name="contype_01" id="contype_01">
      <option value="ssh">SSH</option>
      <option value="telnet">Telnet</option>
    </select>
    Credentials :
    <select name="creds_01" id="creds_01">
      <option> --Please Select-- </option>
    </select>
    <br /> <!-- 2nd row of chained selects -->
    Connection Type :
    <select name="contype_02" id="contype_02">
      <option value="ssh">SSH</option>
      <option value="telnet">Telnet</option>
    </select>
    Credentials :
    <select name="creds_02" id="creds_02">
      <option> --Please Select-- </option>
    </select>
  </form>

和jquery:

 $(document).ready(function(){
    $("#contype_01").change(function(){
        var contype=$("#contype_01").val();
        $.ajax({
            type:"post",
            url:"ncmexport-helper.php",
            data:"contype="+contype,
            success:function(data){
                $("#creds_01").html(data);
            }
        });
    });
    $("#contype_02").change(function(){
        var contype=$("#contype_02").val();
        $.ajax({
            type:"post",
            url:"ncmexport-helper.php",
            data:"contype="+contype,
            success:function(data){
                $("#creds_02").html(data);
            }
        });
    });

});

如果你已经做到了这一点，我感谢你，这是我的问题:我需要做些什么来把上面显示的两个jquery代码块变成一个可以在表单中使用多个链接选择的单个块?我非常有限的javascript和jquery技能还不足以让我知道如何迭代不同的选择框id。

注意:原来的jquery/ajax代码我使用来自本教程:http://phpseason.wordpress.com/2013/02/19/dynamic-dependent-select-box-using-jquery-and-ajax/

在我看来，你应该将你的更改处理程序绑定到所有的类型选择(例如使用类选择器)。

。

<form>
Connection Type :
<select name="contype_01" id="contype_01" class="contype">
  <option value="ssh">SSH</option>
  <option value="telnet">Telnet</option>
</select>
Credentials :
<select name="creds_01" id="creds_01">
  <option> --Please Select-- </option>
</select>
<br /> <!-- 2nd row of chained selects -->
Connection Type :
<select name="contype_02" id="contype_02" class="contype">
  <option value="ssh">SSH</option>
  <option value="telnet">Telnet</option>
</select>
Credentials :
<select name="creds_02" id="creds_02">
  <option> --Please Select-- </option>
</select>

js: 

$(document).ready(function(){
    $(".contype").change(function(){
       var element = $(this);
       var contype = element.val();          
       $.ajax({
           type:"post",
           url:"ncmexport-helper.php",
           data:"contype=" + contype,
           success:function(data){
               // build the id for creds
               var id = element.attr("id");
               var credId = "#creds_" + id.slice(-2);
               $(credId).html(data);
           }
       });
    });
});
相关文章：