Как Вы ограничиваете опции, выбранные в поле выбора HTML?
Я использую избранный тег в форме, которую я делаю, который позволяет множественные выборы, но я хочу сделать максимальный объем выборов до 10. Является этим возможным использованием JavaScript или jQuery?
Заранее спасибо!
4 ответа
Вот какой-то полный код для использования ... должен любить игру 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>
Это ограничило бы пользователя 3 опциями:
$("select").on("click", "option", function () {
if ( 3 <= $(this).siblings(":selected").length ) {
$(this).removeAttr("selected");
}
});
Fiddle: http://jsfiddle.net/2GrYk/
Использование jQuery Вы можете прикрепить функцию к событию изменения и, поскольку он является множественным выбором Val (), будет массивом. Вы всегда можете проверить длину массива и сделать что-то, если его предопределенный размер. Следующий код демонстрирует, как вы узнаете, сколько элементов выбираются.
$("#select").change(function(){
alert($(this).val().length);
});
Обработал это! Вот полученный код:
$(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();
});
Спасибо за всю вашу помощь, ребята!