Меню
раздел: Список Select js

Список SELECT javascript (select js) и его методы

Объект SELECT, в языке JavaScript, используется для создания раскрывающегося списка с единичным или множественным типом выбора опций.

Мы рассмотрим примеры скриптов для обращения к свойствам и методам SELECT и работу с обработчиком события SELECT onChange().

 <FORM id="FormMyLove" name="FormMyLove" method="GET" action="select_b.php" >
<SELECT name="SelectMyLove" id="SelectMyLove" >
<OPTION  VALUE="0">Выбираем любимый фрукт</OPTION>
<OPTION SELECTED VALUE="1">Абрикос</OPTION>
<OPTION VALUE="2">Персик</OPTION>
<OPTION VALUE="3">Слива</OPTION>
<OPTION VALUE="7">Груша</OPTION>
</SELECT>
</FORM>


Что бы получить значение value или text выбранного элемента необходимо использовать свойство SELECT selectedIndex которое возвращает число (не путайте его со значением value) обозначающее порядковый номер выбранного элемента, нумерация начинается с нуля.


var n = document.getElementById("SelectMyLove").options.selectedIndex;



Если ни один из элементов не выбран будет возвращено число -1 (минус один).

У объекта SELECT есть объект OPTION методы которого используются для получения значения текстовых меток text и значения value любого из элементов списка SELECT.
Учтите, что у объекта SELECT нет свойств select text и select value поэтому, к этим значениям необходимо обращаться через массив OPTION.
Обращение происходит так:

    // n индекс выбранного или указанного элемента
var txt = document.getElementById("SelectMyLove").options[n].text;
var val = document.getElementById("SelectMyLove").options[n].value;
   


Что бы изменить значения text или value элемента списка к нему так же обращаемся через массив OPTIONS:


document.getElementById("SelectMyLove").options[n].text = "Txt";
document.getElementById("SelectMyLove").options[n].value = "Val";
  


Теперь мы можем написать функцию, для получения значений выделенного элемента и их вывода в модальном окне alert():

  
  function GetData()
  {
     // получаем индекс выбранного элемента
  	 var selind = document.getElementById("SelectMyLove").options.selectedIndex;
   var txt= document.getElementById("SelectMyLove").options[selind].text;
   var val= document.getElementById("SelectMyLove").options[selind].value;

   alert("Теxt= "+ txt +" " + "Value= " + val);
  }
  
   


Учитывайте, что при отправке данных формы на сервер отправляется значение value выбранного элемента.

Напишем функцию которая при загрузке страницы сделает текущим указанный элемент списка SELECT с помощью метода selected объекта options. После выполнения кода текущим станет элемент с value=7.

  
   function SelectDefault()
  {
     // порядковый индекс options[4] под которым идёт элемент с  value=7
    document.getElementById("SelectMyLove").options[4].selected=true;

  }

    
   

Теперь рассмотрим обработчик события SELECT onChange() он срабатывает только если будет выбран другой элемент отличный от текущего.
Напишем функцию Size() которая покажет количество элементов списка используя свойство SELECT length (счёт ведётся с нуля), а затем очистит список SELECT удалив все его элементы. И поместим эту функцию в обработчик события onChange():

  
    function Size()
  {
  alert( "количество элементов= " + document.getElementById("SelectMyLove").length);
      if (confirm("Очистить список?")) {

	   document.getElementById("SelectMyLove").length=0;
	}
      else
       {

	   }

  }

 
 


Рассмотрим некоторые из атрибутов SELECT которые указаны в стандарте the Option Element
Атрибут disabled делает неактивным список SELECT запрещая или разрешая выбор элементов.
Что бы запретить выбор select его свойство disabled - необходимо установить в положение true делается это так:

document.getElementById("SelectMyLove").disabled="disabled";


Что бы разрешить вновь выбор, если он был запрещён, устанавливаем select disabled в положение false:

document.getElementById("SelectMyLove").disabled=false;


Иногда бывает необходимо узнать в каком положении атрибут select disabled и доступен ли список для выбора.
Для этого:

var b= document.getElementById("SelectMyLove").disabled;


если список не доступен для выбора будет возвращено значение атрибута true если доступен false

Весь пример работы с SELECT выглядит так:




  <html>
  <head>
  <title>
  </title>
  </head>
  <body>

  <script type="text/javascript">
  function SelectDefault()
  {
       // порядковый индекс под которым идёт элемент с  value=7
    document.getElementById("SelectMyLove").options[4].selected=true;

  }

   function Size()
  {
    alert( "количество элементов= " + document.getElementById("SelectMyLove").length);
      if (confirm("Очистить список?")) {

	   document.getElementById("SelectMyLove").length=0;
	}
      else
       {

	   }

  }
  </script>

 <FORM id="FormMyLove" name="FormMyLove" >
<SELECT name="SelectMyLove" id="SelectMyLove" OnChange='Size()' >

<OPTION  VALUE="0">Выбираем любимый фрукт</OPTION>
<OPTION VALUE="1">Абрикос</OPTION>
<OPTION VALUE="2">Персик</OPTION>
<OPTION VALUE="3">Слива</OPTION>
<OPTION VALUE="7">Груша</OPTION>
</SELECT>
</FORM>

 <script type="text/javascript">
 SelectDefault();
 </script>

  </body>
  </html>


   
   


Вас так же может заинтересовать - создание связанных или динамических списков SELECT


Свойства, методы,обработчики событий объекта Select

Тип Элемент Описание
Обработчик событий onBlur Запускает определённый код при потере окном выбора фокуса
onChange Запускает определённый код при изменении значения окна выбора.
onFocus Запускает определённый код при получении окном выбора фокуса.
Метод blur() Убирает фокус с окна выбора
focus() Перемещает фокус на окно
handleEvent() Вызывает обработчик указанного события.
unwatch() Прекращает отслеживание свойства.
watch() Устанавливает отслеживание свойства.
Свойство form Возвращает форму, в которой находится данное окно выбора.
Iength Возвращает количество опций в окне выбора.
name Возвращает имя окна выбора, которое указано в атрибуте name.
options Возвращает массив, в котором содержатся все элементы окна выбора. Элементы окна выбора создаются с помощью HTML- дескриптора <option>. Свойство options имеет два подсвойства: length и selectedlndex.
selectedlndex Возвращает целое число, которое соответствует индексу выбранной в окне выбора опции.
type Возвращает тип данного окна выбора, указанный в атрибуте type. Для экземпляров объекта Select, в которых указан атрибут multiple, это свойство возвращает select-multiple; для экземпляров, в которых атрибут multiple не указан, возвращается значение select-one.


Свойства и методы объекта Option используемого для получения доступа к свойствам SELECT

Тип Элемент Описание
Свойство defaultSelected Содержит опцию, по умолчанию выбранную в списке
selected Содержит выбранную опцию
text Содержит текст опции
value Содержит значение, которое возвращается при выборе опции
Метод unwatch() Прекращает отслеживание свойства объекта Option
watch () Устанавливает отслеживание свойства объекта Option
Ещё в этом разделе: