Question

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

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

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

Answer 1

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

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

要访问<select>选项，您应该使用this.options[this.selectedIndex]＆amp;不只是this.selectedIndex

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

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

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

$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：

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

您可以测试此here（首先打开控制台）。

在select html标签中选择相同选项时执行功能

1 个答案: