1

我拥有的是一个通过 jquery 填充的 html 选择列表。现在我有更改事件，因此当我更改选项时，地图会重新聚焦在 POI 上。我正在尝试使其工作，以便当我单击相同的选项时，地图会将其视为更改事件。选项不支持点击事件，并且在选择列表上添加点击事件也不起作用，因为会有 2 个点击事件。

总之，如果您单击相同的选项， .change() 不会触发。

有没有办法使这项工作，对选项标签的修改或我可能不知道的其他事件？

谢谢！

4

3 回答 3

6

尝试做这样的事情：

$('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');
}
于 2013-07-24T16:31:49.960 回答
0

您可以添加没有价值的第一个选项。在更改时，您将第一个选项的值更改为所选选项的值并执行您的“goto-code”。

因为您希望能够再次更改它，所以您必须使用 选择第一个选项$('item')[0].selectedIndex=0。这不会被用户注意到，因为它具有相同的值。因此，您的用户可以再次将其更改为他们刚刚选择的选项，将其折叠回来

于 2013-07-24T16:25:56.007 回答
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/

于 2019-04-29T14:31:49.877 回答