Javascript 修复多重选择标记中最后更改的元素？

我有一个多选标签

<select multiple="multiple" size="5" id="cities_select">
     <option value="1">city1</option>
     <option value="2">city2</option>
     <option value="3">city3</option>
     <option value="4">city4</option>
     <option value="5">city5</option>
     <option value="6">city6</option>
     ................................
</select>

有什么想法吗

---

感谢

获得了这样的效果，我忍不住使用了.change方法，所以我编写了函数onclick event

$("#supply_cities_select option").click(function()
        {
            var clicked = 0;
            if($(this).attr("selected")) 
            {
                clicked = $(this).val();
            }
            if(clicked != 0)
            {
                var a = $("#supply_cities_select :selected").length;
                 end = $("#supply_cities_select :selected").slice(-1).map(function(i) {
                      return this.value;
                  }).get().join('');
                if(a > 5)
                {
                    var v1 = parseInt(clicked);
                    var v2 = parseInt(end);
                    if(v1 < v2)
                    {
                        $("#supply_cities_select option[value='"+v2+"']").attr("selected",false);

                    }
                    if(v1 == v2)
                    {
                        $("#supply_cities_select :selected:lt(1)").attr("selected",false);
                    }

                }
            }
        });

---

您可以看到演示

如果单击第一个，然后按住shift键并单击最后一个，会怎么样如果最后编辑的元素在列表的后半部分，我必须删除第一个选定的元素，否则最后的.3,1,2,4,5有效吗？它必须是有序的吗？@Reigel可能我没有明确地问这个问题，3,1,2,4,5和1,2,3,4,5之间没有区别，这只是选定元素的列表，任何顺序都是有效的，如果

$("#supply_cities_select option").click(function()
        {
            var clicked = 0;
            if($(this).attr("selected")) 
            {
                clicked = $(this).val();
            }
            if(clicked != 0)
            {
                var a = $("#supply_cities_select :selected").length;
                 end = $("#supply_cities_select :selected").slice(-1).map(function(i) {
                      return this.value;
                  }).get().join('');
                if(a > 5)
                {
                    var v1 = parseInt(clicked);
                    var v2 = parseInt(end);
                    if(v1 < v2)
                    {
                        $("#supply_cities_select option[value='"+v2+"']").attr("selected",false);

                    }
                    if(v1 == v2)
                    {
                        $("#supply_cities_select :selected:lt(1)").attr("selected",false);
                    }

                }
            }
        });