Question

我有一个带有5组2个相关选择的表格。一般学术兴趣＃1，涵盖5等专业1等。

<select name="general_1"  id="general_1">
  <option value="1">Agriculture</option>
  <option value="2">Architecture</option>
  <option value="3">Art & Design</option>
</select>

<select name="major_1" id="major_1">
  <option value=""></option>
<select>

我的jQuery如下所示：

$("#general_1").change(function() {
  var selected = $("option:selected",this).val();

  $("#majors_1").children().remove().end().append("&lt;option value=\"\"&gt;-- Select a Majors --&lt;/option&gt;");

    if(selected == "") return;

      $.getJSON( api url,{"cip_fam":selected}, function(res,code) { 
        var optionToBeAppendedTo = $("#majors_1").empty();

          $("#majors_1").attr( "size", res.length );

          for (var i = 0; i < res.length; i++) {
            optionToBeAppendedTo.append($('<option/>', {value: res[i].ID, text: res[i].NAME}));
          };
      });
});

如何更改我的JavaScript，使我在显示页面上显示5套-general_1 + major_1，general_2 + major_2等。

编辑-根据下面的第二个答案更新了代码：

$(".general").change(function() {
    $.ajaxSetup({
      dataFilter: function(data, type){
       return type == 'json' ? data.replace(/^(\/{2})?/, '') : data;
      }
    });

    var selected = $(this).val();

    if(selected == "") return;

    var $major = $(this).next('.major').empty().append('<option value="">-- Select a Major --</option>');

    $.getJSON(compath + "/studentmajorsCFC.cfc?method=queryCipMajorRemote&returnformat=json",{"stm_cip_fam":selected}, function(res,code) { 

        $major.prop("size", res.length).empty();

            for (var i = 0; i < res.length; i++) {
                $major.append($('<option/>', {
                value: res[i].ID,
                text: res[i].NAME
                }));
            };
        });
    });

Answer 1

您正在沿着递增的id属性的路径前进，这是一种反模式，应避免使用。

您可以通过在所有元素上使用通用类，将相同的重复HTML结构分组并使用DOM遍历来查找相关元素来简化和干燥此代码，如下所示：

<div class="course">
  <select name="general[]" class="general">
    <option value="1">Agriculture</option>
    <option value="2">Architecture</option>
    <option value="3">Art &amp; Design</option>
  </select>
  <select name="major[]" class="major">
    <option value=""></option>
  </select>
</div>
<div class="course">
  <select name="general[]" class="general">
    <option value="1">Agriculture</option>
    <option value="2">Architecture</option>
    <option value="3">Art &amp; Design</option>
  </select>
  <select name="major[]" class="major">
    <option value=""></option>
  </select>
</div>
<!-- ... further repetitions of this structure... -->

$('.general').change(function() {
  var selected = $(this).val();
  if (selected == "")
    return;

  var $major = $(this).closest('.course').find('.major').empty().append('<option value="">-- Select a Majors --</option>');

  $.getJSON(apiurl, {
    "cip_fam": selected
  }, function(res, code) {
    $major.prop("size", res.length).empty();
    for (var i = 0; i < res.length; i++) {
      $major.append($('<option/>', {
        value: res[i].ID,
        text: res[i].NAME
      }));
    };
  });
});

Answer 2

我想我明白了您要做什么。您可以随时更改使用jQuery选择器的方式，并使用类之类的共享选择器。请参见下面的示例。我删除了下面的ajax代码，并通过简单的测试将其替换，但是您可能会看到类选择器对于尝试的内容可能更具动态性。

$(function() {
  $(".generalSelect").change(function() {
    var $generalSelect = $(this);
    var selected = $("option:selected",this).val();

    var $majorSelect = $generalSelect.closest("div").find(".majorSelect");
    $majorSelect.children().remove().end().append("&lt;option value=\"\"&gt;-- Select a Majors --&lt;/option&gt;");

      if(selected == "") {
          return;
      }
        /* 
        //Comment out ajax call since it wont work in example code. Notice the use of $majorSelect var
        
        $.getJSON( api url,{"cip_fam":selected}, function(res,code) { 
          var optionToBeAppendedTo = $majorSelect.empty();

            $majorSelect.attr( "size", res.length );

            for (var i = 0; i < res.length; i++) {
              optionToBeAppendedTo.append($('<option/>', {value: res[i].ID, text: res[i].NAME}));
            };
        });*/
        
        //For showing how selectors work:
        $majorSelect.empty();
        $majorSelect.attr( "size", 3 );
        for (var i = 0; i < 3; i++) {
          $majorSelect.append('<option>'+"TEST"+'</option>');
        };
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="general_1"  id="general_1" class="generalSelect">
    <option value="1">Agriculture</option>
    <option value="2">Architecture</option>
    <option value="3">Art & Design</option>
  </select>

  <select name="major_1" id="major_1" class="majorSelect">
    <option value=""></option>
  <select>
</div>
<br />
<br />
<div>
  <select name="general_2"  id="general_2" class="generalSelect">
    <option value="1">Agriculture</option>
    <option value="2">Architecture</option>
    <option value="3">Art & Design</option>
  </select>

  <select name="major_2" id="major_2" class="majorSelect">
    <option value=""></option>
  <select>
</div>
<br />
<br />
<div>
  <select name="general_3"  id="general_3" class="generalSelect">
    <option value="1">Agriculture</option>
    <option value="2">Architecture</option>
    <option value="3">Art & Design</option>
  </select>

  <select name="major_3" id="major_3" class="majorSelect">
    <option value=""></option>
  <select>
</div>

jQuery中的相关选择，用户最多可以选择5次

2 个答案: