Question

说我有这个下拉列表：

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

有什么想法吗？

Answer 1

$("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/

Answer 2

以下代码应该做我认为你想要的。每次选择一个项目时，它会将当前选择列表与上一个列表进行比较，并确定哪些项目已更改：

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

它应该像Firefox等人一样在Internet Explorer中工作。

Answer 3

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

要获取值，建议您使用jQuery form plugins中的fieldValue方法。这是从任何类型的表单元素中获取价值的有效方法。此外，您可以使用此插件轻松通过AJAX提交表单。

Answer 4

这将仅警告最后（最近）选定的值。使用select的更改处理程序调用{{1}}将返回所有选定值的数组：

$(this).val()

Answer 5

我不确定你完全想要什么。这将始终提醒最后选定的颜色：

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

Answer 6

这实现起来非常复杂，我使用了一个更简单的选项来列出项目，旁边有一个复选框和一个select / unselect all按钮。这样做效果更好，IE也支持。感谢大家的回答。

如何获得多选项下拉列表的值？

6 个答案: