HTML design
- <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="Javascript"> </script>
- <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
- <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js " type="Javascript"> </script>
- <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
- <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="Javascript"> </script>
- <body>
- <select size="5" name="lstStates" multiple="multiple" id="lstStates">
- <option value="NJ">New Jersey</option>
- <option value="NY">New York</option>
- <option value="OH">Ohio</option>
- <option value="TX">Texas</option>
- <option value="PA">Pennsylvania</option>
- <option value="GG">asdfa</option>
- <option value="AW">jghjh</option>
- <option value="AE">qwer</option>
- </select>
- </body>
- $(function()
- {
- $('#lstStates')
- .multiselect(
- {
- buttonText: function(options, select)
- {
- console.log(select[0].length);
- if (options.length === 0)
- {
- return 'None selected';
- }
- if (options.length === select[0].length)
- {
- return 'All selected (' + select[0].length + ')';
- }
- else if (options.length >= 10)
- {
- return options.length + ' selected';
- }
- else
- {
- var labels = [];
- console.log(options);
- options.each(function()
- {
- labels.push($(this)
- .val());
- });
- return labels.join(', ') + '';
- }
- }
- });
- });