选择标签上的页面加载事件

Question

I have a select tag with 4 options. I want to get a particular option clicked when the page loads and a method should called because of click event. Here what I have tried so far:

HTML

<select>
  <option >Select an option...</option>
  <option >Option 1</option>
  <option >Option 2</option>
  <option >Option 3</option>
  <option id="lop"  onclick="myFunction()">Option 4</option>
</select>

Jquery

$(document).ready(function(){
  $("#lop").trigger("click");

  function myFunction(){
    alert("hi");
  }
});

JsFiddle

Answer 1

You could try that:

 $(document).ready(function(){ var opt = $("#a").val(); if (opt == 4) { myFunction(); } function myFunction(){ alert("hi"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value=''>Select an option...</option> <option value=1>Option 1</option> <option value=2 >Option 2</option> <option value=3>Option 3</option> <option id="a" value=4>Option 4</option> </select> 

Answer 2

This might help you, you should trigger a change event on select to trigger after the page load,

 $(document).ready(function(){ $("#lop").trigger("click"); $('select').on('change', function(){ var val= $(this).val(); if(val == 4) myFunction(); }) }); function myFunction(){ alert("hi"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select> <option value=''>Select an option...</option> <option value=1>Option 1</option> <option value=2 >Option 2</option> <option value=3>Option 3</option> <option id="lop" onclick="myFunction()" value=4>Option 4</option> </select> 

Answer 3

You need to use on change like below

 $(document).ready(function(){ alert(this.value); $('.selectList').on('change', function(){ alert(this.value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectList"> <option value=''>Select an option...</option> <option value=1>Option 1</option> <option value=2 >Option 2</option> <option value=3>Option 3</option> <option id="lop" onclick="myFunction()" value=4>Option 4</option> </select> 

Answer 4

Please change your Js with the following code:

$(document).ready(function(){
function myFunction(){
 alert("hi");
 }

 $("#myselect").change(function() {
    var opt = $(this).val();
  if(opt == '4'){
    myFunction();
    }
});
 var opt1 = $("#myselect").val("4");
 if(opt1){
  myFunction();
 }
});

And remove onclick function from your option

<select id="myselect">
  <option value=''>Select an option...</option>
  <option value=1>Option 1</option>
  <option value=2 >Option 2</option>
  <option value=3>Option 3</option>
  <option id="lop"  value=4>Option 4</option>
</select>

Answer 5

Shortest way do this:

 $(window).load(function(){ $('select').val('3').trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value=''>Select an option...</option> <option value=1>Option 1</option> <option value=2 >Option 2</option> <option value=3>Option 3</option> <option id="lop" onclick="myFunction()" value=4>Option 4</option> </select> 

Answer 6

Simply You can set the value of Select option dynamically like this

$(document).ready(function(){
    $("#selectInp").val(4);

});

With HTML Provide an Id to your Select

<select id="selectInp">
<option value=''>Select an option...</option>
 <option value=1>Option 1</option>
 <option value=2 >Option 2</option>
 <option value=3>Option 3</option>
 <option id="lop"  onclick="myFunction()" value=4>Option 4</option>

Updated fiddle: https://jsfiddle.net/j9o6ra3x/514/

OR If you want to work as your Solution Simply,

$("#lop").trigger("click"); // Instead of
$("#lop").prop('select',true); // Put this on ready

enter code here

Answer 7

Do this:

 $(document).ready(function(){ $("#mySelect").click(function(){ var opt = $("#mySelect option:selected").val(); if (opt == 4) { myFunction(); } }); function myFunction(){ alert("hi"); } }); 

 <select id="mySelect"> <option value=''>Select an option...</option> <option value=1>Option 1</option> <option value=2 >Option 2</option> <option value=3>Option 3</option> <option value=4>Option 4</option> </select> 

https://jsfiddle.net/j9o6ra3x/491/

Answer 8

You can use change event to achieve the functionality you desire.

using .change()

$('#lop').change(function(){
        //your function
}) 

using .bind()

$('#lop').bind('change',function(){
 //your function
});

Then you can trigger change on page load:

$(function () {
   $("select#myselect").change();
});

Answer 9

<select id='selectInp' size='<?php echo $prod_count;?>' onclick='window.loadStates()' class='form-control' name='categ'><li><option id='toate' value='999'>Toate produsele</option>
$(document).ready(function(){
    $("#selectInp").val(999);
      $("#toate").trigger("click");


});