중력 양식 드롭 다운 동적 채우기 문제

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의 드롭 다운에 여전히 '플레이어 2 선택'이 표시됩니다.

제안을 잘못 구현해야하지만 여기서 약간의 도움이 필요합니다.

Answer 1

드롭 다운에 하나의 옵션 만있을 때 onChange를 활성화하는 방법에 대한 간단한 예를 정리했습니다. 또한 두 가지 옵션이있는 경우 어떻게되는지 보여줍니다.

실질적으로 다음을 jQuery에 추가하기 만하면됩니다.

$('#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>

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 
} 

업데이트 : 난 당신의 코드를 약간 수정했습니다. 차이점은 검사가 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 
}