在select html标签中选择相同选项时执行功能 [英] Execute function when selecting same option in select html tag

问题描述

只要有人点击< select> < option> ，我就会在我的cordova应用中执行各项功能>下拉框，使用onChange =HTML属性。我希望能够在单击相同选项时执行这些功能。 onChange显然不会在这里工作。是否存在允许这种情况发生的某种解决方法，因此当用户单击HTML选择标记中已选择的相同选项时，它会执行该方法吗？这将使我能够删除一些难看的按钮，这些按钮仅在用户想要选择已经选择的选项时才需要。谢谢。

I execute functions throughout my cordova app, whenever someone clicks an <option> in the <select> dropdown box, by using the onChange="" HTML attribute. I would like to be able to execute the functions when they click the same option. onChange obviously won't work here. Is there some kind of work around to allow this to happen, so when the user clicks the same option that is already selected in the HTML select tag, it executes the method? This would enable me to delete some unsightly buttons that are only needed for when the user wants to choose the already selected option. Thanks.

我如何做的当前代码示例：

Current code example of how I do things:

<select style="left:0; width:100%;" class="textColour" id="allLocationsDropDownTablet" onchange="if (typeof(this.selectedIndex) != undefined) {getClients();navigateToClientsList();this.blur();}"></select>

推荐答案

这是一个比提供的更简单的解决方案链接：

Here is a much simpler solution than the one provided in the link:

此解决方案不是添加类，而是使用JS变量，我们'缓存'最后选择的选项并比较当前为它选择的选项，然后执行一个函数，如果它是相同的。我们还需要一个简单的计数器来跟踪点击量（因为第一次点击会打开下拉菜单）。

Instead of adding classes, this solution works with a JS variable in which we 'cache' the last selected option and compare the currently selected option to it, then execute a function if it is the same. We also need a simple counter which will keep track of the amount of clicks (because the first click opens the dropdown).

访问<选择> 您应该使用的选项 this.options [this.selectedIndex] &不只是 this.selectedIndex

To access <select> options you should use this.options[this.selectedIndex] & not just this.selectedIndex

所以我们在这里进行设置:(默认情况下总是选择选项1）

So here we go for the setup: (Option 1 is always selected by default)

var $select = $('#allLocationsDropDownTablet'), 
    cache = 'Option 1', count = 0;

现在接着是代码:(内联评论以供解释）

Now followed by the code: (inline comments for explanation)

$select.click(function(){
    var $this = $(this), sel;
    // just for testing purpose
    console.log(count);
    // if a click has preceeded the current click, execute comparison function
    if (count === 1) {
        // store the textvalue of the current option
        sel = this.options[this.selectedIndex].textContent 
            || this.options[this.selectedIndex].innerText; //IE8-
        // if current textvalue !== previous option's textvalue, do...
        if (sel !== cache) {
            console.log('Option "' + sel + '" selected');  
        // else if it is the same, do...               
        } else {
            console.log('You selected the same option!!');
        }
        // update the cached option with the current option for subsequent checks
        cache = sel;
        // reset count
        count--;
    } else {
        count++;
    }
});

测试HTML：

Test HTML:

<select id="allLocationsDropDownTablet">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

你可以测试这个这里（先打开控制台）。

You can test this here (open console first).

这篇关于在select html标签中选择相同选项时执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！