如何限制在 html select 框中選擇的選項？

Question

我在允許多項選擇的表單中使用 select 標簽，但我想最多選擇 10 個。這是否可能使用 javascript 或 jquery？

提前致謝！

Answer 1

這里有一些完整的代碼供您使用...得熱愛Google AJAX API游樂場:-)

編輯1：注意：這只能讓你選擇5，因為我不想復制/粘貼另外10個選項:-)

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Sample Select Maximum with jQuery</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">    </script>
    <script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {

      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 5) {
          alert('You can only choose 5!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
        }
      });
    });
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <select multiple id='testbox'>
      <option value='1'>First Option</option>
      <option value='2'>Second Option</option>
      <option value='3'>Third Option</option>
      <option value='4'>Fourth Option</option>
      <option value='5'>Fifth Option</option>
      <option value='6'>Sixth Option</option>
      <option value='7'>Seventh Option</option>
      <option value='8'>Eighth Option</option>
      <option value='9'>Ninth Option</option>
      <option value='10'>Tenth Option</option>
    </select>
  </body>
</html>

演示

Answer 2

這會將用戶限制為3個選項：

$("select").on("click", "option", function () {
    if ( 3 <= $(this).siblings(":selected").length ) {
        $(this).removeAttr("selected");
    }
});

小提琴： http ： //jsfiddle.net/2GrYk/

Answer 3

這個答案適用於這些情況：

正常點擊
只有mousedown（鼠標在鼠標前移動到外面）
鍵盤
如果有不同的選項具有相同的值

碼：

$('#mySelect').on('change', function() {
    if (this.selectedOptions.length < 4) {
        $(this).find(':selected').addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

演示

或者，對於不支持selectedOptions舊瀏覽器，

$('#mySelect').on('change', function() {
    var $sel = $(this).find(':selected');
    if ($sel.length < 4) {
        $sel.addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

演示

Answer 4

使用jQuery，您可以將函數附加到change事件，因為它是一個多重選擇，val（）將是一個數組。 您可以隨時檢查數組的長度，並在其預定義大小的情況下執行某些操作。 以下代碼演示了如何知道選擇了多少項。

  $("#select").change(function(){
        alert($(this).val().length);
  });

Answer 5

弄清楚了！ 這是結果代碼：

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

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

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();
});

謝謝你們的幫助！

Answer 6

我基本上合並了一些提供的答案來制作特定ID的特定內容：

$("#mySelect").on("click", "option", function(){
    var max = 3;
    if ( max <= $(this).siblings(":selected").length ) {
        alert("Only " + max + " selections allowed.");
        $(this).removeAttr("selected");
    }
});

搶

Answer 7

你可以使用jQuery

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });

Answer 8

瞧！ 不需要Jquery。

    var is = 0;
    for (var i = 0; i < selectCountryCode.length; i++) {
        if (selectCountryCode.options[i].selected) {
            is++;
        }
        if (is > 3) {
            selectCountryCode.options[i].selected = false;              
        }
    }

Jilusan

Answer 9

這是一個純香草 JavaScript 示例，基於 jilu 的示例。

const selectEls = document.querySelectorAll('select[multiple]');

selectEls.forEach((selectEl) => {
    selectEl.addEventListener('change', (e) => {

        const currentEl = e.currentTarget;

        let is = 0;
        for (let i = 0; i < currentEl.length; i++) {
            if (currentEl.options[i].selected) {
                is++;
            }
            if (is > 3) { // if you want more than 3 selected options, change the number here
                currentEl.options[i].selected = false;
            }
        }

    })
});

如何限制在 html select 框中選擇的選項？

問題描述

9 個解決方案

解決方案1
29 已采納 2010-01-12 02:23:47

解決方案2
16 2010-01-12 02:27:58

解決方案3
5 2014-05-27 23:53:40

解決方案4
3 2010-01-12 02:15:42

解決方案5
2 2010-01-12 03:23:53

解決方案6
1 2013-05-25 19:23:00

解決方案7
0 2013-01-04 12:55:58

解決方案8
0 2016-03-18 16:05:41

解決方案9
0 2023-01-26 15:17:23

如何限制在 html select 框中選擇的選項？

問題描述

9 個解決方案

解決方案1 29 已采納 2010-01-12 02:23:47

解決方案2 16 2010-01-12 02:27:58

解決方案3 5 2014-05-27 23:53:40

解決方案4 3 2010-01-12 02:15:42

解決方案5 2 2010-01-12 03:23:53

解決方案6 1 2013-05-25 19:23:00

解決方案7 0 2013-01-04 12:55:58

解決方案8 0 2016-03-18 16:05:41

解決方案9 0 2023-01-26 15:17:23

解決方案1
29 已采納 2010-01-12 02:23:47

解決方案2
16 2010-01-12 02:27:58

解決方案3
5 2014-05-27 23:53:40

解決方案4
3 2010-01-12 02:15:42

解決方案5
2 2010-01-12 03:23:53

解決方案6
1 2013-05-25 19:23:00

解決方案7
0 2013-01-04 12:55:58

解決方案8
0 2016-03-18 16:05:41

解決方案9
0 2023-01-26 15:17:23