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

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
}