Question

我希望用户从多个选择选项中仅选择最多三个选项。到目前为止我尝试过这段代码：

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing &amp; Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing &amp; Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

javascript代码：

<script type="text/javascript">
$("select").change(function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        alert('You can select upto 3 options only');
    }
});
</script>

此代码显示选择3个以上选项时的警告框，但仍允许访问选择第4，第5，第6等选项并显示警告框。如何验证？

Answer 1

试试这个......

检查长度并在达到最大选择后取消选择

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing &amp; Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing &amp; Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

    <script type="text/javascript">


        $(document).ready(function() {

          var last_valid_selection = null;

          $('#userRequest_activity').change(function(event) {

            if ($(this).val().length > 3) {

              $(this).val(last_valid_selection);
            } else {
              last_valid_selection = $(this).val();
            }
          });
        });
        </script>

<强>样本： http://jsfiddle.net/9c3sevuv/

Answer 2

您在AlarmManager.setExact(AlarmManager.RTC_WAKEUP, System.currentTimeMillis() + newTimeInterval, PendingIntent);事件中使用了this，这是change的引用。

试试这个：

select

演示：http://jsfiddle.net/tusharj/tmkzebnj/

修改

$("select").on('click', 'option', function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); // alert('You can select upto 3 options only'); } });

演示：http://jsfiddle.net/tusharj/tmkzebnj/1/

Answer 3

您可以在用户选择最大限制后禁用未选择的选项，并在总选择计数低于最大限制时再次启用它们。

以下是示例代码

    function maxAllowedMultiselect(obj, maxAllowedCount) {
            var selectedOptions = jQuery('#'+obj.id+" option[value!=\'\']:selected");
            if (selectedOptions.length >= maxAllowedCount) {
                if (selectedOptions.length > maxAllowedCount) {
                    selectedOptions.each(function(i) {
                        if (i >= maxAllowedCount) {
                            jQuery(this).prop("selected",false);
                        }
                    });
                }
                jQuery('#'+obj.id+' option[value!=\'\']').not(':selected').prop("disabled",true);
            } else {
                jQuery('#'+obj.id+' option[value!=\'\']').prop("disabled",false);
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userRequest_activity" name="activity[]" onchange="maxAllowedMultiselect(this, 2)" multiple>
  <option value="1">Bungee Jumping</option>
  <option value="2">Camping</option>
  <option value="3">Mountain Biking</option>
  <option value="4">Rappelling</option>
  <option value="5">Rock Climbing / Bouldering</option>
  <option value="6">Skiing</option>
  <option value="7">Wild Life (Safari)</option>
  <option value="8">Canoeing &amp; Kayaking</option>
  <option value="9">Rafting</option>
  <option value="10">Sailing</option>
</select>

Answer 4

试试这个Fiddle。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [[self navigationController]setNavigationBarHidden:YES animated:YES ];

    [self.usernameTextbox setDelegate:self];
    [self.passwordTextbox setDelegate:self];

}

-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [self.usernameTextbox resignFirstResponder];
       return YES;
}

-(BOOL)textField2ShouldReturn:(UITextField *)textField
{
    [self.passwordTextbox resignFirstResponder];
    return YES;
}

Answer 5

试试这个

$("select").change(function() {
    if($("select option:selected").length > 3) { 
     alert('You can select upto 3 options only');
     $(this).removeAttr("selected");
  }

});

DEMO

多个选择限制选择数

5 个答案: