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

【问题标题】：how to get html select to show selected value with javascript如何使用 javascript 获取 html 选择以显示选定的值
【发布时间】：2012-06-13 20:57:29
【问题描述】：

我有一个选择下拉列表，在 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”。是否可以？

【问题讨论】：

你可能想要这个：w3schools.com/jsref/event_onselect.asp
嗨 alfasin，以下 HTML 标签支持 onselect：、、、 , , 。我正在使用 <select></select>

标签： javascript html html-select

【解决方案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>

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

【讨论】：

看起来不错 - 比我的回答更优雅。但是OP不想知道最后点击的项目是什么吗？当前进行轮班选择时，我们的两个答案都会记录所有添加到选择中的项目。
如果这就是 OP 想要的......但我认为这没有意义。为什么您想知道单击了哪个项目。唯一有意义的是您和我实施的内容，显示先前和当前选择之间的区别。为此，您可以只在 option 元素上使用 click 事件，但如果您使用键盘更改选择，这将不起作用，所以这是一个非常糟糕的主意。
我想我可能误解了 OP 想要什么！重读这个问题，我意识到没有要求只记录最后点击的项目。
+1，因为你的答案比我的更优雅，并且也记录了删除的项目。
哦，当有人告诉我我的代码看起来很优雅时，我内心有一种刺痛的感觉。谢谢！我几乎赞成你的答案，但后来我发现了那个错误并添加了一个答案：p

【解决方案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;
};

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

【讨论】：

嗨乔纳森，是的，多项选择是关键，我正在尝试您的解决方案。我会告诉你的，谢谢
如果选择的项目超过 10 个，这将失败，因为您使用的是 String.indexOf 并且如果选择的索引为 11，您将得到 1 的误报 jsfiddle.net/FnAuz/2 尝试单击第一项，然后 ctrl+点击最后一项。
我没有使用 JQuery，我更喜欢使用 javascript，但如果没有更好的选择，我会尝试 JQuery。
关于误报非常正确。我想一个解决方案，虽然仍然使用 indexOf 将是值不是整数（例如“val1”、“val2”等而不是“1”、“2”等）。
只要没有值是其他值的子字符串，所以我认为这通常不是一个好的解决方案。

【解决方案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。听起来有点疯狂，我知道，只是一个想法；）

【讨论】：

请不要在 HTML 属性中使用脚本。正确地分离 HTML 和 JS 就像你所做的一样容易
嗨 alfasin，感谢它适用于单选选项。我尝试为列表进行多项选择，所以我将其更改为
@JuanMendes 让我换种说法，你能更具体一点并发表你的更正吗？
@JuanMendes 抱歉 - 我更改它是为了帮助 windforceus 实现他想要的，然后我才看到你的评论 - 你能再次修改我的答案吗？
再次编辑，但我认为这不是OP想要的，您没有多项选择

【解决方案4】：

试试这个：

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

【讨论】：