Сенсорная инерции "Выбор динамического

Выберите Динамический

Комментариев 8 октября 2005 по JavaScript.
Метки:

03/09/2005 О, я опубликовал Введение в Ajax. Как я взял быстрый взгляд на основные вопросы, такие как DOM и XMLHttpRequest, я решил, что пришло время, чтобы показать больше примеров текущей ситуации или места, где вы можете использовать Ajax и библиотека CPAINT.

Тогда я буду учить вас, как для изменения значений <select>, также называемый выпадающий список или раскрывающееся меню. А в следующей статье, каким образом эти ценности могут быть обменены на возвращение XML Ajax.

По сути, изменения значений <select> требуется только одна петля на массив JavaScript. В то же приложение на сервере, мы могли бы построить этот список со значениями в базе данных и показывать в <head>. Тем не менее, давайте представим, что этот список будет меняться с другими действиями на странице пользователя, например, выбор позиции в корзину покупок. Таким образом, мы не хотели бы целую страницу быть перегружены.

Как изменить <select>

В JavaScript, массив возвращается document.forms [форме] [select_nome]. Функции могут получить доступ к параметрам <select>. Первый вариант находится в document.forms [форме] [select_nome]. Функции [0], а вторая находится в document.forms [форме] [select_nome]. Настройки [1] и так далее.

Чтобы указать значение, используя новую опцию ();, которая принимает два аргумента. Первый текст ", а на втором (опционально), значение его.

Таким образом, если мы хотим положить два варианта в <select> назвать примером форма называется формой, мы будем:

Обычный текст

JavaScript:

formulario ] [ exemplo ] . options [ 0 ] = new Option ( "Primeira opção" , 1 ) ; документа. формы [форма] [Пример]. ссылок [0] = новый вариант ( "Первый вариант", 1);
formulario ] [ exemplo ] . options [ 1 ] = new Option ( "Segunda opção" , 2 ) ; документа. формы [форма] [Пример]. страницу [1] = новый вариант ( "Второй вариант", 2);

В HTML, это эквивалентно использованию:

Обычный текст

HTML:

> <select Name = "exemplo">
> Primeira opção </option> <option "1" значения => Первый вариант </ Option>
> Segunda opção </option> <option "2" значения => Второй вариант </ Option>
</ SELECT>

Позвольте мне показать вам полный примеру, с двумя кнопками типа радио. Во-первых, при нажатии на которую будет изменить значение <select> на номера, а второй для кардинала.

Обычный текст

HTML:

DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
End Sub "http://www.w3.org/1999/xhtml">
<head>
<title> Динамические Выбрать </ TITLE>
> <script Type = "text/javascript">
numero_lista = новый массив ( "1", "2", "3");
cardinal_lista = новый массив ( "Первый", "вторая", "Третий");
trocarSelect функции (formulario_nome, select_nome, lista_nome)
(
если (lista_nome == "номер") (
VAR список = numero_lista;
) Остальное (
VAR список = cardinal_lista;
)
VAR select_alvo = document.forms [formulario_nome] [select_nome];
select_alvo.options.length = 0;
для (i = 0; i <lista.length I + +) (
; VAR nome_opcao = List [I];
= new Option ( nome_opcao ) ; select_alvo.options [I] = новая опция (nome_opcao);
)
)
</ Script>
</ Script> </ head>
<body>
method = "post" action = "exemplo.php" > <form "formulario_de_exemplo" имя метода = = "post" "exemplo.php" действий =>
<p>
name = "exemplo" value = "numero" onClick = "trocarSelect('formulario_de_exemplo', 'selecao', 'numero');" / > número ou em <input type = "radio" name = "exemplo" value = "cardinal" onClick = "trocarSelect('formulario_de_exemplo', 'selecao', 'cardinal');" / > cardinal. Включите выберите <input "radio" тип = имя = значение "exemplo" = "numero" OnClick = "trocarSelect('formulario_de_exemplo','selecao','numero');" /> номер или <ввод Type = " радио "NAME =" образец "Value =" Кардинал "OnClick =" trocarSelect ( 'formulario_de_exemplo', 'Select', 'Кардинал'); "/> кардинала.
<br />
> <select Name = "selecao">
> Clique em um botão radio qualquer </option> <option "vazio" значения => выберите переключатель любой </ Option>
</ SELECT>
</ P>
</ FORM>
</ Body>
</ Html>