CODEWITHSUNDEEP
javascripthtmldrop-down-menuhtml-select
Vimal Kumar
Vimal Kumar

Reputation: 19

How to disable the dropdown list elements after some limits of selection in html

I have 30 elements in my select drop-down list. But i need to restrict user to select only 10 of them. Once he selects 10 elements others should get disabled.How can i do this using java script??

Upvotes: 2

Views: 2001

Answers (4)

Keval Bhatt
Keval Bhatt

Reputation: 6322

I created selected only 10 Value

example: http://jsfiddle.net/kevalbhatt18/yYW89/1468/

<select onchange="myFunction()" id="selectNumber">
    <option >Choose a number</option>
</select>

<script>
    var t = [];

    function myFunction() {
        var select = document.getElementById("selectNumber");
        var selectedString = select.options[select.selectedIndex].value;

        if (t.length < 10) {
            t.push(selectedString)
        } else {

            return
        }
        console.log(t)
    }
</script>

For drop Down filling

var select = document.getElementById("selectNumber");
var options = ["1", "2", "3", "4", "5","6","7","8","9","10","11"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

Upvotes: 0

varadk
varadk

Reputation: 98

JavaScript Solution

function checkSelected(el) {
  var opts = document.getElementsByTagName("option");
  var cnt = 0;
  for (var i = 0; i < opts.length; i++) {
    if (opts[i].selected == true) {
      cnt++;

      if (cnt > 10) {
        opts[i].selected = false;
        opts[i].disabled = true;
      }
      opts[i].disabled = false;
    }

  }

}
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <select multiple id="s" onchange="checkSelected(this);" style="height: 200px;width : 200px;">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
    <option>Option 16</option>
    <option>Option 17</option>
    <option>Option 18</option>
    <option>Option 19</option>
    <option>Option 20</option>
    <option>Option 21</option>
    <option>Option 22</option>
    <option>Option 23</option>
    <option>Option 24</option>
    <option>Option 25</option>
    <option>Option 26</option>
    <option>Option 27</option>
    <option>Option 28</option>
    <option>Option 29</option>
    <option>Option 30</option>
  </select>

Upvotes: 0

user786
user786

Reputation: 4364

Use following jquery code

$(document).ready(function() {

  var last_valid_selection = null;

  $('#testbox').change(function(event) {
    if ($(this).val().length > 10) {
      alert('You can only choose 5!');
      $(this).val(last_valid_selection);
    } else {
      last_valid_selection = $(this).val();
    }
  });
});

HTML is following

 <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>

  <option value='11'>First Option</option>
  <option value='12'>Second Option</option>
  <option value='13'>Third Option</option>
  <option value='14'>Fourth Option</option>
  <option value='15'>Fifth Option</option>
  <option value='16'>Sixth Option</option>
  <option value='17'>Seventh Option</option>
  <option value='18'>Eighth Option</option>
  <option value='19'>Ninth Option</option>
  <option value='20'>Tenth Option</option>

  <option value='21'>First Option</option>
  <option value='22'>Second Option</option>
  <option value='23'>Third Option</option>
  <option value='24'>Fourth Option</option>
  <option value='25'>Fifth Option</option>
  <option value='26'>Sixth Option</option>
  <option value='27'>Seventh Option</option>
  <option value='28'>Eighth Option</option>
  <option value='29'>Ninth Option</option>
  <option value='30'>Tenth Option</option>
</select>

The above code is from here How do you limit options selected in a html select box?

Demo

Upvotes: 2

ketan
ketan

Reputation: 19341

You can limit multiple select like following way using JQuery.

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

Check Fiddle

Upvotes: 2

Related Questions