Question

我有一个包含4个选项的select标签。我希望在页面加载时单击一个特定选项，并且应该因为click事件而调用一个方法。这是我到目前为止所尝试的：

HTML

this.getInstance()

Jquery的

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

JsFiddle

Answer 1

你可以尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这可能会对您有所帮助，您应该在选择后触发更改事件以在页面加载后触发

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

您需要使用on change，如下所示

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

请使用以下代码更改您的Js：

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

从您的选项中删除onclick功能

<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

最短路径：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

只需您可以动态设置选择选项的值

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

});

使用HTML为您的选择提供ID

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

更新小提琴： https://jsfiddle.net/j9o6ra3x/514/

或者如果您想作为解决方案 简单地说，

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

在这里输入代码

Answer 7

这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 8

您可以使用change事件来实现您想要的功能。

使用.change（）

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

使用.bind（）

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

然后您可以在页面加载时触发更改：

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


});

单击Select标签上的页面加载事件

HTML

Jquery的

9 个答案: