Question

我想要一个选择框，其中有一个玩家列表，另外两个玩家可以添加11个替换，以及一个替代玩家。我发现以下内容有效。

<script type="text/javascript">
$().ready(function() {
$('#add_starting').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove_starting').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
 $('#add_subs').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select3');
});
$('#remove_subs').click(function() {
return !$('#select3 option:selected').remove().appendTo('#select1');
});
});
</script>

这是我的HTML

<div class="form-group">
            <div class="col-sm-3">
            <select name="from" id="select1" class="form-control" size="8" multiple="multiple">
                    {exp:clubmanager:player_select} 
            </select>
            </div>

            <div class="col-sm-1">
                <button type="button" id="add_starting" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="remove_starting" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
            </div>

            <div class="col-sm-3">
                <select name="match_players[]" id="select2" class="form-control" size="8" multiple="multiple"></select>
            </div>

            <div class="col-sm-1">
                <button type="button" id="add_subs" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="remove_subs" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
            </div>

            <div class="col-sm-3">
                <select name="match_subs[]" id="select3" class="form-control" size="8" multiple="multiple"></select>
            </div>

            </div>

           <div class="form-group">
            <div class="col-xs-6">
                <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
              <button type="submit" class="btn-u">Update Player</button>
            </div>
            </div>

我希望在select2框中添加一些验证，如果少于11个或超过11个玩家，它将不允许提交。

Answer 1

试试这个：

document.onkeypress = function(e) {
e = e || window.event;
var charCode = e.charCode || e.keyCode,
character = String.fromCharCode(charCode);

if(e.charCode == 98 || e.keyCode == 98) {
    Stopwatch.start();

} else if(e.charCode == 114 || e.keyCode == 114) {
    Stopwatch.lap();

}
};

此外，在执行$('button[type="submit"]').on('click', function(e){ if ( $('#select2').find('option').length != 11 ) { e.preventDefault(); // prevent submit console.log("Not posting!"); } else { console.log("Posting!"); } });之前，您不必使用remove()元素，因为元素无论如何只能有一个父元素。所以这样可以正常工作：

appendTo()

完整示例：JSFiddle

Answer 2

我想从选择选项1开始，您要添加玩家来选择选项2.因此，最好在select option1上设置验证，然后检查选择选项2是否有11个玩家（选项）。

您还可以在add_subs为替代玩家添加验证。

$('#select2 option,#add_subs').on('click',function(){
   if ( $('#select2 option').length == 11 ) {
      return false;
   }
else{
 //code to append
}
});

Jquery多个选择框限制选择

2 个答案: