javascript - 如何获取 html 选择以使用 javascript 显示选定的值

Question

我有一个选择下拉列表，其中在 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 并选择另一个选项(例如“项目 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;
            }
        }
    });