onchange事件无法在javascript的首次更改时触发？

Question

<form class="uk-form-stacked">
    <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>
    <select id="kUI_dropdown_basic_select" class="uk-form-width-medium" onchange="getIPL();">
        <?php  foreach ($response->result->allAcc as $data) { ?>
            <option  value="<?php echo $data->Id;?>">   <?php echo $data->Name; ?></option>
        <?php } ?>
    </select>
</form>


<script>
function getIPL() {
    var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
    urlmenu.onchange = function() {
    window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self");
    };
}
</script>

Thank you for taking the time for reading my question. onchange() is not working for the first time second time it works fine

Answer 1

Remove onchange from select box. And change your JS with this :

<script>

    var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
    urlmenu.onchange = function() {
    window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self");
    };

</script>

Answer 2

Very easy and simple code below

<form class="uk-form-stacked">
   <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>

   <select id="kUI_dropdown_basic_select" onmousedown="this.value='';" class="uk-form-width-medium" onchange="getIPL(this.value);">
      <option  value="aaa">aaa</option>
      <option  value="bbb">bbb</option>
      <option  value="ccc">ccc</option>
      <option  value="ddd">ddd</option>
   </select>
</form>

javascript function

function getIPL(value) {
  //var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
  //urlmenu.onchange = function() {
  window.open( 'admin_mailbox.php?Id=' + value,"_self"); 
  //};
}

Answer 3

When you are using document.getElementById for getting element id, than no need to use onchange() event in <select>

And i also suggest you to add one more option for selection <option>Select</option>

Test Example (change as per your PHP Code):

 var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' ); urlmenu.onchange = function() { window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self"); }; 

 <form class="uk-form-stacked"> <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label> <select id="kUI_dropdown_basic_select" class="uk-form-width-medium"> <option value="">Select</option> <option value="test1">Test1</option> <option value="test2">Test2</option> </select> </form> 

Answer 4

You have already defined onchange event of select box here...then why you use onchange again on same element.

Use following code

<form class="uk-form-stacked">
    <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>
    <select id="kUI_dropdown_basic_select" class="uk-form-width-medium">
        <?php  foreach ($response->result->allAcc as $data) { ?>
            <option  value="<?php echo $data->Id;?>">   <?php echo $data->Name; ?></option>
        <?php } ?>
    </select>
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#kUI_dropdown_basic_select").change(function(){
        window.open( 'admin_mailbox.php?Id=' + $(this).val() ,"_self");
  });
});
</script>