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

Question

我不知道如何使用 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 代码块转换为一个可以在一个中处理多个链式选择的 block 。形式？我非常有限的 javascript 和 jquery 技能还不足以让我知道如何迭代不同的选择框 id。

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

Answer 1

据我所知，您应该将更改处理程序绑定(bind)到所有 contype 选择(例如使用类选择器)。

例如

<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);
           }
       });
    });

});