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;
}

现在的问题是，由于行$('mydropdownId').selectedIndex = 0;，我每次进行选择时，下拉菜单将始终将 text1 显示为所选文本，我正在尝试为发生的事件创建记录器在一个网站上，我只能通过chrome插件或chrome控制台注入js。

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

Answer 1

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

首先，要使用ID通过ID选择元素，您需要在名称前放置'#'。所以你必须改变

$('mydropdownId')

到

$('#mydropdownId')

使其正常工作。

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

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

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

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

要最终创建“点击记录器”，首先要声明一个全局变量，以存储点击。因此，在所有内容之上（在dom ready功能内），您添加以下行：

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。如果您改为使用click事件，则每次单击时都会将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/中的示例

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

1 个答案: