[英]jQuery - On button click trigger select option
Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu. 伙计们,我想问一下,当我单击按钮以触发选择菜单中的选项选择时,如何在jQuery中实现功能。
Here is my HTML code: 这是我的HTML代码:
<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option>
</select>
The option which i want to be triggered as selected is created_at
. 我希望被选中时触发的选项是
created_at
。
Here is the code of the button that i want when it is clicked to select option with id created_at
of select menu with id target_menu
: 这是单击以选择ID为
target_menu
的选择菜单的ID为created_at
的选项时我想要的按钮的代码:
<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>
When i click on the button -> Click Me!
当我单击按钮->
Click Me!
i want jQuery to force/trigger a selection of option with id created_at
at select menu with id target_menu
. 我希望jQuery在ID为
target_menu
选择菜单上强制/触发ID为created_at
的选项的选择。
How my function triggerChange()
must look like ? 我的函数
triggerChange()
必须看起来如何?
So guys, how can i make it? 伙计们,我该怎么做?
Try this function: 试试这个功能:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
There are few ways of doing it. 做到这一点的方法很少。 One is below.
下面是一个。 A piece of advise is that do not use inline event handlers!
一个忠告是不要使用内联事件处理程序!
$("button").on("click", function() { $("#target_menu option").filter(function(opt, el) { return el.id === 'created_at' && $(el) }).prop("selected", true); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="target_menu" name="sort_by"> <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=position">Позиция</option> <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option> <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option> <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option> <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option> </select> <button class="FirstFilter"> Click me! </button>
function triggerChange() { $("#target_menu").val($("#created_at").val()); }
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <select id="target_menu" name="sort_by"> <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=position">Позиция</option> <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=name">Име</option> <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=price">Цена</option> <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=color">Color</option> <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&id=35&max=424&min=0&order=created_at">Дата</option> </select> <button onclick="triggerChange()" class="FirstFilter"> Click me! </button>
Here is an answer to your question. 这是您问题的答案。
function triggerChange()
{
$("#target_menu").val("created_at");
}
as you have an id applied to each option you can target that id then use the .prop() method. 当您将一个ID应用于每个选项时,您可以将该ID作为目标,然后使用.prop()方法。
$(document).ready(function(){
$(".firstFilter").click(function(){
var id = $("#created_at").prop("selected","selected");
});
});
Use this 用这个
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
I made this fiddle for you 我为你做了这个小提琴
First step is to get value from element with id created_at
: 第一步是从ID为
created_at
元素获取值:
var wantedValue= $('#created_at').attr('value');
And next, you need to set selected value for your select element: 接下来,您需要为选择元素设置选择的值:
$('#target_menu').val(wantedValue).trigger('change'); // need to call .trigger('change') here
// you can also call .trigger() - without 'change' keyword
Explanation about why you need to trigger .change
HERE 为什么你需要触发说明
.change
HERE
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
对于选择框,复选框和单选按钮,当用户使用鼠标进行选择时会立即触发该事件,但是对于其他元素类型,该事件将推迟到该元素失去焦点之前。
Update ( thanks LShetty ) 更新 (感谢LShetty)
$('.FirstFilter').click(function(){
$("#position").removeAttr("selected");
$("#created_at").attr('selected','selected');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.