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

时间:2012-06-13 20:57:30

标签: javascript html html-select

我有一个选择下拉列表,在页面加载时选择了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项”。可能吗?

4 个答案:

答案 0 :(得分: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;
            }
        }
    });

答案 1 :(得分: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;
};

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

答案 2 :(得分: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。听起来有点疯狂,我知道,只是一个想法;)

答案 3 :(得分:0)

试试这个:

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