Основы работы с XHTML и CSS
Извлечение данных раскрывающегося списка
Следующий пример демонстрирует использование раскрывающегося списка для ввода данных. Если выбрать позицию из списка и щелкнуть на кнопке "Submit", то будет выведено значение выбранного варианта. Отметим, что если выбор не делать, то по умолчанию выбирается первая позиция в списке.
<!-- Сценарий браузера --> <script type="text/javascript"> function Get_Color() { var DropDown = document.getElementById("Color") var Value = DropDown.options[DropDown.selectedIndex].value var Output = document.getElementById("Output")
Output.innerHTML = "<b>You selected: </b>" + Value + "." } </script>
<!-- Код XHTML --> <div> Choose your favorite color: <select id="Color"> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> <option value="Yellow">Yellow</option> <option value="Maroon">Maroon</option> <option value="Purple">Purple</option> <option value="Aqua">Aqua</option> <option value="Teal">Teal</option> </select> <input type="button" value="Submit" onclick="Get_Color()"/><br/> <span id="Output" style="color:red"></span> </div>
Раскрывающемуся списку присвоено значение id, так как он вовлечен в обработку браузером, а не сервером. Когда нажимается кнопка "Submit", активируется функция JavaScript с именем Get_Color(). Этот сценарий определяет индекс выбранной позиции (которые пронумерованы, начиная с 0) и выведет его значение.
