Question

我有一个选择下拉列表，在页面加载时选择了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并选择其他选项（如“第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项”。可能吗？

Answer 1

以下代码将告诉您已选择的内容以及取消选择的内容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;
            }
        }
    });

Answer 2

您可以在更改事件（例如，选择项目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;
};

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

Answer 3

它看起来很乱，所以我把它作为答案发布：

<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。听起来有点疯狂，我知道，只是一个想法;）

Answer 4

试试这个：

var e = document.getElementById("ID_of_Select_Element");
var _selectedValue= e.options[e.selectedIndex].value;

如何获取html选择以使用javascript显示所选值

4 个答案: