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

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

Answer 1

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

e.g。

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

});

如何以相同的形式处理多个Jquery + Ajax相关的选择框

1 个答案: