Question

I have the following list that is present to the user

<select id="regions" multiple="multiple">
  <option value= us-west  selected="selected">US West Coast</option>
  <option value= us-east  selected="selected">US East Coast</option>
  <option value= eur  selected="selected">Europe</option>
  <option value= asia  selected="selected">Asia</option>
</select>

如上文所述,所有项目均选定。

I was trying to implement a jquery function where if the user clicks an option on the list only the clicked item (let s say Europe) will be removed, while the rest of the options are selected. I know that this is possible by holding down "CTRL" and clicking, but is there a way where all the user has to do is to click?

我行使这一职能:

  <script type="text/javascript">
    function(){
        $("#regions options:selected").removeAttr("selected");
    };
  </script>

Answer 1

因此,我只剩下一段时间,但我认为我有重新寻找的功能。

Check this fiddle

The idea is, create an array to keep track of what s selected. The natural behaviour of a multiple select box if you only click, is to deselect all other selections and select what you clicked on.

因此,我们不关心选箱中的内容,而是看到(在停用时)点击了哪一种选择,并将它列入我们的个人名单,然后更新选定箱,以反映我们名单上的内容(关于改用)。

This prevents the user from dragging to select multiple items in the selectbox, but being able to do that would probably just mess it up.

var selection = [];

$( #the_box > option ).mousedown(function(){

    if(selection.length < 1){
        selection.push($(this).val());
    } else {
        var found = 0;
        for(i = 0; i < selection.length; i++) {
            if(selection[i] == $(this).val()){
                selection.splice(i, 1);
                found = 1;
                break;
            }
        }
        if(found === 0){
            selection.push($(this).val());
        }
    }
});

$( #the_box ).bind( mouseup mouseout , function(){
    $(this).children( option ).each(function(){
        $(this).removeAttr( selected );
    });
    $(this).children( option ).each(function(){
        for(i = 0; i < selection.length; i++){
            if($(this).val() == selection[i]){
                $(this).attr( selected , selected );
            }
        }
    });
});

但是,你只能用一份清单或一套干,来做这一准确的事情,而不是使用本地的<代码><select>标签,如果你重新使用这种方法(因为不必围绕选定箱的违约行为工作),实际上会更容易这样做。

Answer 2

您可以使用:

$( option ).click(function(){
    $(this).removeAttr( selected ,  selected )
    .siblings().attr( selected ,  selected );
});

这项职能是取消目前被点击项目的甄选状态,但重新计算整个siblings。

见http://jsfiddle.net/saeedneamati/fVGNa/“rel=“nofollow”>fiddle。

<>Update: 由于使用键盘,我们可以向控制发出另一个信号(另一个旗帜),我们仍然需要用 mo模拟它。例如,我们可以假定,右翼像Ctrl+click,而左点只是点击。然而,右翼不是网络上的良好模式,也不是这种常见模式。

另一种选择是重新界定我们的企业,使控制采取不同的做法(例如,在烟火点上,如果已经选定目标,那么就将其lect除,如果未选定的话,则在全部选定备选办法中添加这种控制)。但这种做法的不利之处在于,用户在使用你的控制时会丢失,因为它远远没有正常的超文本控制,他们每天都与这种控制发生互动。换言之,改变控制行为并不是解决未爆弹药问题的良好办法。

Answer 3

这决不是完美的解决办法,但欢迎你尝试。

To attach the function (note that this allows a callback function to be fired after selecting items .. for example if you want to populate another list based on the selection)

$( #mySelect ).click(function () {
    singleClickList(this, myCallbackFunction);
});

该职能:

function singleClickList(mythis, callback) {
    var selected = $(mythis).data( selected );
    if (selected == undefined) selected = [];
    var scrollTop = mythis.scrollTop;
    var current = $(mythis).val();
    var index;
    if (current != null) {
        if (current.length > 0) {
            index = $.inArray(current[0], selected);
            if (index >= 0)
                selected.splice(index, 1);
            else
                selected.push(current[0]);
        }
        $(mythis).val(selected);
        $(mythis).data( selected , selected);
        mythis.scrollTop = scrollTop;
        if (callback) callback();
    }
}

请注意,这要求进行分类,并利用分类法储存选定的物品。

友情链接