jquery - 重力形式下拉动态人口问题

Question

我有一个重力表单，我可以在其中动态填充一个下拉列表和第二个字段，其中包含该下拉列表中的项目数。

如果项目数 >1，我会使用所选项目信息来获取一些附加信息，并使用它来填充第二个下拉列表。这很好用。这是相关代码部分:

// When a choice from the dropdown "Which League (F32)" is selected,
// populate "League ID (F57)",
// populate "League Name (F64)" and
// populate dropdown "Player Two (F13)"
jQuery("#input_5_32").on('change',function(){
    var myval = jQuery(this).val();

    jQuery("#input_5_57").val(myval);
    jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

    jQuery.ajax({
        type: 'post',
        dataType:'JSON',
        url : bb_ajax_url,
        data : { league_id: myval, action:'get_player_two_names' },
        success : function( data ) {
            jQuery('#input_5_13').html('');
            jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
            jQuery.each(data , function(k,p){
                jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>'));
            });

        },
    });
});

但是，大多数情况下，第一个下拉列表中只有一个项目，在这种情况下，我不需要用户打开它并单击该项目进行选择，我已经知道它是什么将。我想使用这些信息并触发相同的例程，动态填充第二个下拉列表，这样我就可以隐藏第一个下拉列表，并为用户节省一点时间和烦恼。

工作模块根据第一个下拉列表的更改而触发。我可以通过其他方式触发此行为，或者伪造下拉列表 #1 中的选择吗？

解决了我的插件冲突，所以我再次尝试实现@Wouter Bouwman的答案，尽管我可能在某个地方犯了错误。这是我所做的:

    //Check whether the amount of options is only one
if (jQuery('#input_5_32').length === 1) {
  jQuery('#input_5_32').change(); //Trigger the change event
  console.log("Yes, Routine to not need 'Which League' has been executed");
  var myval = jQuery(this).val();
  console.log(myval);
  jQuery("#input_5_57").val(myval);
  jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

  jQuery.ajax({
      type: 'post',
      dataType:'JSON',
      url : bb_ajax_url,
      data : { league_id: myval, action:'get_player_two_names' },
      success : function( data ) {
          jQuery('#input_5_13').html('');
          jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
          jQuery.each(data , function(k,p){
              jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>'));
          });

      }
  });
}

#input_5_32 没有填充任何内容，#input_5_64 填充的是“选择本场比赛的联赛”而不是联赛名称。下拉菜单#input_5_13仍然显示“选择玩家二号”。

我一定没有正确地实现该建议，但这里需要一点帮助。

Answer 1

我整理了一个小示例，说明当下拉列表中只有一个选项时如何激活 onChange。它还向您展示了当有两个选项时会发生什么。

实际上，这意味着您只需将以下内容添加到您的 jQuery 中。

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one
  jQuery('#input_5_32').change(); //Trigger the change event
}

$('#select').change(function(e) {
  $('#select2').show();
});

if ($('#select option').length === 1) {
  $('#select').change();
}

$('#select3').change(function(e) {
  $('#select4').show();
});

if ($('#select3 option').length === 1) {
  $('#select3').change();
}

<div>
<select id='select'>
  <option val='1'>Only option</option>
</select>

<select id='select2' hidden>
  <option val='1'>Opt1</option>
  <option val='2'>Opt2</option>
  <option val='3'>Opt3</option>
  <option val='4'>Opt4</option>
  <option val='5'>Opt5</option>
  <option val='6'>Opt6</option>
</select>
</div>

<div>
<select id='select3'>
  <option val='1'>First option</option>
  <option val='1'>Second option</option>
</select>

<select id='select4' hidden>
  <option val='1'>Opt1</option>
  <option val='2'>Opt2</option>
  <option val='3'>Opt3</option>
  <option val='4'>Opt4</option>
  <option val='5'>Opt5</option>
  <option val='6'>Opt6</option>
</select>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

更新:我稍微编辑了你的代码。不同之处在于检查必须放置在 onChange 事件之外。

jQuery("#input_5_32").on('change', function() {
  var myval = jQuery(this).val();

  jQuery("#input_5_57").val(myval);
  jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

  jQuery.ajax({
    type: 'post',
    dataType: 'JSON',
    url: bb_ajax_url,
    data: {
      league_id: myval,
      action: 'get_player_two_names'
    },
    success: function(data) {
      jQuery('#input_5_13').html('');
      jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
      jQuery.each(data, function(k, p) {
        jQuery('#input_5_13').append(jQuery('<option value="' + p.v + '">' + p.t + '</option>'));
      });
    },
  });
});

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one
  jQuery('#input_5_32').change(); //Trigger the change event
}