javascript - Click event on page load on a Select tag - Stack Overflow

admin管理员组

文章数量:1324230

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

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

• javascript
• jquery
• html

Share Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jun 18, 2018 at 7:57 saurabh kumarsaurabh kumar 4511 silver badge1010 bronze badges 1

• Have a look at my answer – mohit sharma Commented Jun 18, 2018 at 8:28

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 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./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>

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>

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/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

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./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>

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./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>

Shortest way do this:

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

<script src="https://ajax.googleapis./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>

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/j9o6ra3x/491/

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

<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");


});

at first, you should set an onload event for the body as follows:

window.onload = function() {
  document.querySelectorAll('select').forEach(select => {
    select.onload();
  });
}

the above code triggers the onload event for all select tags when the page is loaded.

now you should set the onload event for the select tag as like this:

<select onload="document.getElementById('#optionTagId').selected = true">

本文标签： javascriptClick event on page load on a Select tagStack Overflow