发表新帖
发表新帖

HTML Multiselect Limit

前端 未结
关注
4 1600
佛祖请我去吃肉
佛祖请我去吃肉 2020-11-30 12:38

Is it possible to set limit to multipleselect?

Below is an example code where user can select more than 1 value.
提交评论
  •  加载中...
  • 终归单人心
    2020-11-30 12:59

    You would do this via javascript on the client side, and then add a check on the server side as well in case the client has disabled javascript.

    Here is some basic client side code to give you an idea:

    <html>
    <body>
        <form onsubmit="validate()">
            <select multiple="multiple" id="choose" name="choose"> 
                <option value="1">Value 1</option> 
                <option value="2">Value 2</option> 
                <option value="3">Value 3</option> 
                <option value="4">Value 4</option> 
                <option value="5">Value 5</option> 
                <option value="6">Value 6</option> 
            </select><br>
            <input type="submit">
        </form>
        <script>
        function validate()
        {
            var selectChoose = document.getElementById('choose');
            var maxOptions = 2;
            var optionCount = 0;
            for (var i = 0; i < selectChoose.length; i++) {
                if (selectChoose[i].selected) {
                    optionCount++;
                    if (optionCount > maxOptions) {
                        alert("validation failed, not submitting")
                        return false;
                    }
                }
            }
            return true;
        }
        </script>
    </body>
</html>
    0 讨论(0)
  • 借酒劲吻你
    2020-11-30 13:12

    RedFilter has the right idea with validating by javascript. Haven't tested, but you could do something like:

    var options = document.all.tags("option");
var selectedCounter = 0;
    
for (var i=0; i < options.length; i++) {
   if (options[i].selected) {
      selectedCounter++;
   }
   checkCounter();
}

function checkCounter() {
   //disable all options here
}
    0 讨论(0)
  • 时光说笑
    2020-11-30 13:13

    Script that will disallow more than 3 elements to be selected (as opposed to just validating it at submit time).

    http://jsfiddle.net/v33sszgp/

    var verified = [];
document.querySelector('select').onchange = function(e) {
  if (this.querySelectorAll('option:checked').length <= 3) {
      verified = Array.apply(null, this.querySelectorAll('option:checked'));
  } else {
    Array.apply(null, this.querySelectorAll('option')).forEach(function(e) {
        e.selected = verified.indexOf(e) > -1;
    });
  }
}

    Note there's some additional complexity related to preventing the item from actually being selected on the select and that it rather validates a user's actions and reverts it if it's invalid.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题