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

        },
    });
});

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

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

让我的插件发生冲突，所以我再次尝试实现@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仍然显示“Select Player Two”。

我必须错误地实施该建议，但需要一点帮助。

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
}

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

1 个答案: