用于选择的 JavaScript/Jquery 事件，其中 onchange 在执行操作后将选择恢复为默认值

Question

我有一个导航下拉菜单，其 onchange 属性调用一个函数，该函数打开一个子窗口，然后将下拉菜单的值重置为默认值。我需要检查用户选择了哪个选项，但由于该函数将所选值恢复为默认值，因此我总是使用任何事件处理程序获取默认值。我的选择标签看起来像

<select name="mydropdown" id="mydropdownId"  onchange="gotoMyFunction()">
        <option value="val1" selected="">text1</option>
        <option value="val2">text2</option>
        <option value="val3">text3</option>
        <option value="val4">text4</option>
</select>

和gotoMyFunction()的定义

function gotoMyFunction(){
        var selectedIndex  = $('mydropdownId').selectedIndex;
        var selectValue = $('mydropdownId').options[selectedIndex].value;
        switch (selectValue)
        {       
            case "val1":                
                val1Operation();                                
                $('mydropdownId').selectedIndex = 0;
                break;              
            case "val2":
                val2Operation();
                $('mydropdownId').selectedIndex = 0;
                break;          
            case "val3":                
                val3Operation();
                $('mydropdownId').selectedIndex = 0;
                break;                                              
            case "val4":                
                val4Operation();
                $('mydropdownId').selectedIndex = 0;
                break;              
            default:
                $('mydropdownId').selectedIndex = 0;
                // do nothing
        }    
        return true;
}

现在的问题是，每当我进行选择时，我的下拉菜单总是将 text1 显示为选定的文本，因为 $('mydropdownId').selectedIndex = 0; 行我正在尝试为发生在网站，我只能通过chrome插件或chrome控制台注入js。

更新 jsfiddle 我的场景的链接请注意小提琴的 HTML 部分无法更新以获得解决方案

Answer 1

你在这里犯了一些小错误。

首先，要通过ID选择一个元素，使用jquery，你需要在名字前面放一个'#'。 所以你必须改变

$('mydropdownId')

到

$('#mydropdownId')

让这个工作。

接下来是。 .selectedIndex 是一个普通的 js 属性。使用 jquery 时，可以使用.prop() 函数

$('#mydropdownId').prop("selectedIndex"); //using jquery .prop()

或者如果您更喜欢 vanilla js，请将您的 jquery 对象转换为 js 对象。

$('#mydropdownId')[0].selectedIndex; //convert jquery object to js object

要最终创建您的“点击记录器”，首先您需要声明一个全局变量来存储您的点击次数。因此，在所有内容之上（在 dom 就绪函数中）添加以下行：

var mySelValRecords = []; //this creates your array

对于简单的记录器，您不需要 switch/case 语句。因此，如果您没有 4 个不同的功能，它们会根据您的选择做不同的事情，这里是您全新的选择记录器功能：

$("#mydropdownId").on("click", function(){ 
  mySelValRecords.push($(this).val()); //add the current selection to your array
  $(this).prop("selectedIndex", 0); //reset your selection
  //here you can check, the record of your clicks:
  console.log(mySelValRecords);
});

我的解决方案的缺点是，由于您重置为列表的第一个值，选择 val1 时将永远不会发生更改事件 - 因为它已经被选择。如果你改用点击事件，每次点击下拉框都会添加 val1，这也可能导致点击记录器数组中出现不需要的内容...

所以如果你还想记录val1的点击，你可以使用js在选择框中插入一个新的默认选项：

var defaultOptionElem = $("<option></option>") //create a new option element
    .val("default") //add a value to the element
    .prop("selected", true) // set this element to 'selected'
    .text("default"); //enter text to be shown in the dropdown
//prepend this as first element into your select box:
$("#mydropdownId").prepend(defaultOptionElem); 

现在，每次点击后，都会再次显示默认值，您可以记录从 val1 到 val4 的所有点击。 检查http://jsfiddle.net/ztjad9o1/1/ 以获取工作示例