1

我有一个选择下拉列表，其中在 html 中的页面加载时选择了 1 个项目。

<select name = "options">
  <option value = "1">Item1</option>
  <option value = "2" selected>Item2</option>
  <option value = "3">Item3</option>
  <option value = "4">Item4</option>
</select>

现在我想在用户按下 shift 并选择另一个选项（例如“Item 3”）时捕获新的选择选项。

我有以下代码来查找列表中的所有选择

 var value = "";
 for (var intLoop = 0; intLoop < Form.elements[index].length; intLoop++) {

     if(Form.elements[index][intLoop].selected )
             value = value + Form.elements[index][intLoop].value;
 }

我可以看到“第 2 项”和“第 3 项”被选中，但我只想捕获“第 3 项”。是否可以？

4

4 回答 4

3

这里的代码会告诉你什么被选中和什么被取消http://jsfiddle.net/8dWzB/

它使用Array.prototype.indexOf，这不是最快的方法。但它应该让你朝着正确的方向前进。

HTML

<select id="options" multiple="multiple">
  <option value = "1">Item1</option>
  <option value = "2" selected>Item2</option>
  <option value = "3">Item3</option>
  <option value = "4">Item4</option>
</select>

JS

function getSelectedIndexes(select) {
   var selected = [];
   for (var i = 0; i  < select.options.length; i++) {
       if(select.options[i].selected ) {
            selected.push(i);
       }
   }
   return selected;
}

var select = document.getElementById("options");
var prevSelected = getSelectedIndexes(select);

select.onchange = function(e) {
    var currentlySelected = getSelectedIndexes(this);

    for (var i =0; i < currentlySelected.length; i++) {
        if (prevSelected.indexOf(currentlySelected[i]) == -1) {
            console.log("Added to selection ", this.options[currentlySelected[i]].text);
        }
    }

    for (var i =0; i < prevSelected.length; i++) {
        if (currentlySelected.indexOf(prevSelected[i]) == -1) {
            console.log("Removed from selection  ", this.options[prevSelected[i]].text);
        }
    }        
    prevSelected = currentlySelected;
};
​

如果你真的只想知道最后点击了哪个项目，你可以使用下面的代码。我将使用 jQuery，因此我可以轻松地在所有选项对象上设置处理程序。请记住，如果您使用键盘更改选择，这将不起作用

    $('option').click(function(e){
        var parentNode = this.parentNode;
        for (var i=0; i < this.parentNode.options.length; i++) {
            if (parentNode.options[i] == this) {
              console.log('Clicked item with index', i);
              break;
            }
        }
    });
于 2012-06-13T22:19:31.957 回答
1

您可以在更改事件之前检查所选选项的值（例如选择项目 1 和 2），然后在事件之后再次检查（例如选择项目 1、2 和 3），并比较差异。

这是一个例子。

在这里小提琴：http: //jsfiddle.net/FnAuz/4/

我修改了您select以允许多项选择，因为我认为这是问题的症结所在。

HTML：

<form id="my-form">
    <select name = "options" id="options" multiple>
      <option value = "val1">Item1</option>
      <option value = "val2">Item2</option>
      <option value = "val3">Item3</option>
      <option value = "val4">Item4</option>
    </select>
</form>​

JS：

var oldValue = "";
document.getElementById('options').onchange = function() {
    var myForm = document.getElementById ('my-form');
    var value = "";
    for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
        if(myForm.elements[0][intLoop].selected) {
            value = value + myForm.elements[0][intLoop].value;
        }
    }
    for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
        var optionVal = myForm.elements[0][intLoop].value;
        if(myForm.elements[0][intLoop].selected && value.indexOf(optionVal) !== -1  && oldValue.indexOf(optionVal) === -1) {
            console.log('Last clicked was ' + myForm.elements[0][intLoop].value)
        }
    }
    oldValue = value;
};

编辑：我刚刚注意到我的示例在用户进行命令/ctrl 选择时有效，但是如果他们进行了移位选择，那么所有新值都将被计为“最后点击的项目”。所以我的代码需要一些工作来解释这种情况。我没时间了，但希望我的代码在当前状态下仍然有用！

于 2012-06-13T21:45:48.620 回答
0

它开始看起来很乱，所以我将其发布为答案：

<html>
<head>
<script type="text/javascript">
<!--
var value = '0';

document.getElementById('options').onchange = function() {
    value = parseInt(value) + parseInt(this.value);
    alert(value);
}
-->
</script>
</head>
<body>
    <select name="options" id="options">
    <option value = "1">Item1</option>
      <option value = "2" selected>Item2</option>
      <option value = "4">Item3</option>
      <option value = "8">Item4</option>
    </select>
</body>    
</html>

选择多个项目的版本：好吧，如果您想累积项目，您可以为每个产品分配二进制 ID，然后您可以从总数中提取所有选定的产品。例如，如果总数是：7，您可以轻松地将其转换为二进制字符串“111”，这意味着他们选择了项目 1、2、4。听起来有点疯狂，我知道，只是一个想法；）

于 2012-06-13T21:40:47.857 回答
0

试试这个 ：

var e = document.getElementById("ID_of_Select_Element");
var _selectedValue= e.options[e.selectedIndex].value;
于 2013-10-25T04:19:47.633 回答