在选择列表中选择相同的选项
Choosing same option in select list
我有一个通过jquery填充的html选择列表。现在我有更改事件,这样当我更改选项时,地图会重新聚焦于POI。我正试图让它发挥作用,这样当我点击同一个选项时,地图就会将其视为一个更改事件。选项不支持单击事件,在选择列表中添加单击事件也不起作用,因为会有2个单击事件。
总之,如果单击相同的选项,.change()不会触发。
有没有办法做到这一点,修改选项标签或其他我可能不知道的事件?
谢谢!
尝试这样做:
$('select').on({
change: function(e) {
alert('change')
$(this).data('change', true);
},
click: function() {
if (!$(this).data('change')) {
$(this).trigger('change');
}
$(this).data('change', false);
}
});
http://jsfiddle.net/WFmpW/1/
所以我们的想法是,只有在之前并没有更改选项的情况下,才会在单击时触发更改事件。要做到这一点,我们可以设置一些标志,就像我对data-change
所做的那样。
正确答案:
我将编辑这个答案,这样我就可以接受这个正确的答案,因为想法是正确的,但实现不是。正确的方法是去掉.change事件。链接到正确的代码:http://jsfiddle.net/qcJwm/1/.
代码:
$('select').click(function () {
if ($(this).data('click')) {
doStuff();
$(this).data('click', false);
} else {
$(this).data('click', true);
}
});
var doStuff = function () {
alert('stuff');
}
您可以添加第一个没有值的选项。更改时,您将第一个选项的值更改为所选选项的值,并执行"转到代码"。
因为您希望能够再次更改它,所以必须使用$('item')[0].selectedIndex=0
选择第一个选项。用户不会注意到这一点,因为它具有相同的值。因此,您的用户可以再次将其更改为他们刚刚选择的选项,以将其折叠回
我遇到了同样的问题,但在移动设备上也需要它,所以我结合了几个不同的解决方案。不幸的是,我没有找到一种在不多次触发目标函数的情况下完成所有这些的方法,所以我最终用setTimeOut
限制了它(
它远非完美,但在我的场景中有效:
<select id="select">
<option disabled selected>Pick one..</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option class="dummy" style="display:none">Pick one..</option>
</select>
和jQuery:
var canDo = true; //variable for settimeout
$('#select').on('focus',function(){
$(this).find("option.dummy").text($(this).find("option:selected").text());
$(this).find("option.dummy").prop("selected", true);
$(this).data('click', true);
});
$('#select').on('change blur',function(){
//blur is optional and offers solution to the case where user closes options
//in mobile ja taps away (if you then want to trigger the function). BUT, it
//also causes a bug: if user opens options and clicks the topmost option, which
//is the header bar showing currently selected option, options are hidden and
//function triggered - but the focus stays on the element, so when user clicks
//away, function is re-triggered.
var select = $(this);
var text = select.find("option:selected").text();
$('.dummy').attr('value',select.val()).text(text);
doYourThing($(select).val());
});
$('#select option').on('click',function(){ //note that we're checking clicks to option instead of select
if($(this).data('click')){
$(this).data('click', false);
doYourThing($(select).val());
}else{
$(this).data('click', true);
}
$(this).parent().blur();
});
function doYourThing(stuff){
if(canDo){
canDo = false;
alert('Selected '+stuff);
canDoTimeout = setTimeout(function(){
canDo = true;
}, 500);
}
}
jsFiddle:http://jsfiddle.net/nxabv0wk/3/
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素