如何获取多选项下拉菜单的值？

说我有这个下拉菜单：如何获取多选项下拉菜单的值？

<select name="color" multiple="multiple"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
</select>

所以基本上超过1的颜色可以选择。我想要的是，如果用户选择红色，然后点击绿色，我希望每次调用一个函数时弹出一个消息框，指出最近点击的颜色。

我已经试过这样：

<option value="red" onclick="alert('red');">Red</option> 
<option value="green" onclick="alert('green');">Green</option> 
<option value="blue" onclick="alert('blue');">Blue</option>

这个工作在Firefox和Chrome，但不是在IE浏览器。

任何想法？

来源

2010-02-14 Click Upvote

这太复杂了，我使用了一个简单的选项来列出项目旁边的复选框和一个选择/取消全选按钮。这效果更好，也支持IE。感谢大家的答案。

来源

2010-02-15 00:30:39

请看看我的答案（http://stackoverflow.com/questions/2261518/how-to在您放弃您的首选方法之前，您可以使用-de-the-value-of-a-multiple-option-dropdown/2262938＃2262938）。一旦你将需求分解成小块，这并不复杂。 – Tim 2010-02-15 09:29:08

$("select[name='color']").change(function() { 
    // multipleValues will be an array 
    var multipleValues = $(this).val() || []; 

    // Alert the list of values 
    alert(multipleValues[multipleValues.length - 1]); 
});

下面是另一个例子：http://api.jquery.com/val/

来源

2010-02-14 15:14:54

问题是，可以选择多个选项。如果我选择绿色，它的作品，然后如果按住CTRL并点击红色，它仍然说绿色，虽然我想它然后说红色 – 2010-02-14 15:21:20

@Click Upvote - 现在它支持多个值:) – 2010-02-14 15:22:02

但我不希望它说绿色和红色，我希望它只说出刚刚点击的选项。例如，我选择了绿色，我按住CTRL并点击红色，我希望它只能说红色。如果我选中了绿色和红色，并且我点击蓝色，我希望它只能说蓝色，等等。 – 2010-02-14 15:26:49

这将提醒只有最后（最近）选定的值。使用选择的变化处理程序将返回所有选择值的数组调用$(this).val()：

$(document).ready(function() { 
    $("select[name=color] option").click(function() { 
     alert($(this).val()); 
    }); 
});

来源

2010-02-14 15:15:42 karim79

请注意，您可以使用键盘选择一个选项，但不会触发单击事件:) – 2010-02-14 15:26:05

在IE中不起作用 – 2010-02-14 15:32:12

@Click Upvote - 可能是因为我使用select的name作为类选择器。我已经编辑过，如果你喜欢，现在就试试。 – karim79 2010-02-14 15:36:16

我不知道你究竟想。这将始终提醒最后选择颜色：

$(function(){ 
    var selected = Array(); 
    $('select[name=color] option').click(function() { 
     if($(this).is(':selected')) { 
      selected.push($(this).val()); 
     } 
     else { 
      for(var i = 0; i < selected.length;i++) { 
       if(selected[i] == $(this).val()) { 
        selected = selected.splice(i,1); 
       } 
      } 
     } 
     alert(selected[selected.length -1]) 
    });   
});

数组用于维护所选颜色的历史。

在过去点击颜色，它是简单的：

$(function(){ 
    $('select[name=color] option').click(function() { 
     alert($(this).val()); 
    });   
});

来源

2010-02-14 15:29:08

正如我对karmin79所说：请注意，您可以使用键盘选择一个选项，它不会触发单击事件:) – 2010-02-14 15:31:20

由于您使用jQuery，我建议你看一看this superb plugins。这个插件将多选下拉列表转换为复选框列表，因此用户可以轻松地选择多个值。

为了得到这些值，我建议你使用jQuery form plugins的fieldValue方法。这是从任何类型的表单元素获取价值的可靠方法。除此之外，你可以使用这个插件轻松地通过AJAX提交你的表单。

来源

2010-02-14 15:42:44

下面的代码应该做我认为你以后的事情。每一个项目被选中时，它比较对前面的列表选择当前列表中，而且决定了项目发生了变化：

<html> 
    <head> 
    <script type="text/javascript"> 
     function getselected(selectobject) { 
     var results = {}; 
     for (var i=0; i<selectobject.options.length; i++) { 
      var option = selectobject.options[i]; 
      var value = option.value; 
      results[value] = option.selected; 
     } 
     return results; 
     } 

     var currentselect = {}; 

     function change() { 
     var selectobject = document.getElementById("colorchooser"); 
     var newselect = getselected(selectobject); 
     for (var k in newselect) { 
      if (currentselect[k] != newselect[k]) { 
      if (newselect[k]) { 
       alert("Option " + k + " selected"); 
      } else { 
       alert("Option " + k + " deselected"); 
      } 
      } 
     } 
     currentselect = newselect; 
     } 
    </script> 
    </head> 
    <body> 
    <select id="colorchooser" 
      name="color" 
      multiple="multiple" 
      onchange='javascript:change();' 
      > 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
    </body> 
</html>

应该在Internet Explorer上工作一样好，火狐等。

来源

2010-02-14 21:45:21 Tim

如何获取多选项下拉菜单的值？

回答

相关问题