jQuery-On按钮点击触发器选择选项
jQuery - On button click trigger select option
伙计们,当我点击一个按钮触发选择菜单中的一个选项时,我想问我如何在jQuery中创建一个函数。
这是我的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>
我希望被触发的选项是created_at
。
这是我想要的按钮的代码,当它被点击以选择id为target_menu
的选择菜单的id为created_at
的选项时:
<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>
当我点击按钮->Click Me!
时,我希望jQuery在id为target_menu
的选择菜单上强制/触发id为created_at
的选项选择。
我的函数triggerChange()
必须是什么样子?
伙计们,我该怎么做?
试试这个函数:
function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}
有几种方法可以做到这一点。建议不要使用内联事件处理程序!
$("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>
这是你问题的答案。
function triggerChange()
{
$("#target_menu").val("created_at");
}
使用此
function triggerChange(){
$("#target_menu").eq(4).prop("selected","selected");
}
因为每个选项都有一个id,所以可以针对该id,然后使用.prp()方法。
$(document).ready(function(){
$(".firstFilter").click(function(){
var id = $("#created_at").prop("selected","selected");
});
});
我为你做了这个小提琴
Fiddle
第一步是从id为created_at
:的元素中获取值
var wantedValue= $('#created_at').attr('value');
接下来,您需要为您的选择元素设置选定的值:
$('#target_menu').val(wantedValue).trigger('change'); // need to call .trigger('change') here
// you can also call .trigger() - without 'change' keyword
关于为什么需要触发.change
HERE 的说明
对于选择框、复选框和单选按钮,将触发事件当用户用鼠标进行选择时立即执行,但对于事件的其他元素类型被推迟,直到元素丢失集中
更新(感谢LShetty)
$('.FirstFilter').click(function(){
$("#position").removeAttr("selected");
$("#created_at").attr('selected','selected');
});
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素