如何使用javascript获取html select以显示所选值_Javascript_Html_Html Select

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

javascript html

如何使用javascript获取html select以显示所选值,javascript,html,html-select,Javascript,Html,Html Select,我有一个selectdropdownlist，在html页面加载时选择了一个项目 <select name = "options"> <option value = "1">Item1</option> <option value = "2" selected>Item2</option> <option value = "3">Item3</option> <option value =

我有一个selectdropdownlist，在html页面加载时选择了一个项目

<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。可能吗

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

<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>
<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>

用于选择多个项目的版本：

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

这里有一个例子

在这里拉小提琴：

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

HTML:

JS:

编辑：我刚刚注意到，我的示例在用户进行command/ctrl选择时有效，但如果他们进行了shift选择，则所有新值都将计为“上次单击的项”。因此，我的代码需要一些工作来解释这个场景。我没时间了，但希望我的代码在当前状态下仍然有用

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

这里有一个例子

在这里拉小提琴：

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

HTML:

JS:

下面的代码将告诉您选择了什么和取消选择了什么

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

HTML

如果您确实只想知道上次单击的项目，可以使用以下代码。我将使用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;
            }
        }
    });

下面的代码将告诉您选择了什么和取消选择了什么

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

HTML

    $('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;
            }
        }
    });

试试这个：

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

试试这个：

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

您可能希望这样：您好，onselect由以下HTML标记支持：、、。我使用的是您可能想要的：Hi alfasin，onselect由以下HTML标记支持：。我正在使用请不要在HTML属性中使用脚本。正确地分离HTML和JShi alfasin同样容易，这要感谢它为单选选项工作。我尝试对列表进行多次选择，因此我将其更改为，然后按并选择项目3，警报显示已选择项目2。有办法解决这个问题吗？非常感谢你的帮助。@JuanMendes让我换一种说法，你能更具体一点并发表你的更正吗？@JuanMendes抱歉-我更改了它以帮助windforceus实现他想要的，直到我看到你的评论-你能再次修改我的答案吗？再次编辑，但我认为这不是OP想要的，您没有多个选择请不要在HTML属性中使用脚本。正确地分离HTML和JShi alfasin同样容易，这要感谢它为单选选项工作。我尝试对列表进行多次选择，因此我将其更改为，然后按并选择项目3，警报显示已选择项目2。有办法解决这个问题吗？非常感谢你的帮助

p、 @JuanMendes让我换一种说法，你能更具体一点并发表你的更正吗？@JuanMendes抱歉-我更改了它以帮助windforceus实现他想要的，直到那时我才看到你的评论-你能再次修改我的答案吗？再次编辑，但我认为这不是OP想要的，你没有多个选择Hi Jonathan，是的，多重选择是关键，我正在尝试你的解决方案。我会让你知道，谢谢如果select有10个以上的项目，这将失败，因为你使用的是String.indexOf，如果所选的索引是11，你会得到1的误报尝试单击第一个项目，然后ctrl+单击最后一个项目。我没有使用JQuery，我更喜欢使用javascript，但如果没有更好的选项，我将尝试JQuery。关于误报，这是非常正确的。我想有一个解决方案，虽然仍然使用indexOf，但是值不是整数，例如val1，val2等，而不是1，2等。只要没有值是其他值的子字符串，所以我认为这通常不是一个好的解决方案。嗨，Jonathan，yeh，多重选择是关键，我正在尝试你的解决方案。我会让你知道，谢谢如果select有10个以上的项目，这将失败，因为你使用的是String.indexOf，如果所选的索引是11，你会得到1的误报尝试单击第一个项目，然后ctrl+单击最后一个项目。我没有使用JQuery，我更喜欢使用javascript，但如果没有更好的选项，我将尝试JQuery。关于误报，这是非常正确的。我想有一个解决方案，虽然仍然使用indexOf，但它的值不是整数，例如val1，val2等，而不是1，2等。只要没有值是其他值的子字符串，所以我认为这通常不是一个好的解决方案。看起来不错-比我的答案更优雅。但是OP难道不想知道上次点击的项目是什么吗？在进行轮班选择时，当前我们的两个答案都会记录添加到选择中的所有项目。如果这是OP想要的。。。但我认为这没有道理。为什么您想知道单击了哪个项目。唯一有意义的是您和我实现了什么，显示上一个选择和当前选择之间的差异。因此，您可以在option元素上使用click事件，但如果您使用键盘更改选择，则这将不起作用，因此这是一个非常糟糕的主意。我想我可能误解了OP想要的内容！重读这个问题，我意识到没有要求只记录最后一次点击的项目。+1因为你的答案比我的更优雅，也记录删除的项目。哦，当有人告诉我我的代码看起来很优雅时，我内心有一种刺痛的感觉。谢谢我差点否决了你的答案，但后来我发现了这个错误，并添加了一个答案：pLooks good-比我的答案更优雅。但是OP难道不想知道上次点击的项目是什么吗？在进行轮班选择时，当前我们的两个答案都会记录添加到选择中的所有项目。如果这是OP想要的。。。但我认为这没有道理。为什么您想知道单击了哪个项目。唯一有意义的是您和我实现了什么，显示上一个选择和当前选择之间的差异。因此，您可以在option元素上使用click事件，但如果您使用键盘更改选择，则这将不起作用，因此这是一个非常糟糕的主意。我想我可能误解了OP想要的内容！重读这个问题，我意识到没有要求只记录最后一次点击的项目。+1因为你的答案比我的更优雅，也记录删除的项目。哦，当有人告诉我我的代码看起来很优雅时，我内心有一种刺痛的感觉。谢谢我差点对你的答案投了赞成票，但后来我发现了那个错误并添加了一个答案：p

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