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

Выберите динамического

Комментарии 8 Dameris / Los_Angeles октября 2005 года под Javascript .
Тэги:

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

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

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

Как изменить <Выбор>

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

Чтобы указать значение, мы используем новые Вариант (), которая принимает два аргумента. Во-первых, текст ", а на втором (не обязательно), то значение его.

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

Plain Text

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, это эквивалент с помощью:

Plain Text

HTML:

> <Выберите имя = "пример">
> Primeira opção </option> <Вариант значение = "1"> Первая <параметр / опция>
> Segunda opção </option> <Вариант значение = "2"> Во-вторых <параметр / опция>
</ Select>

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

Plain Text

HTML:

<! 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>
<title> Динамические Выбрать </> название
> <Сценариев типа = "текст / JavaScript">
numero_lista = новый Array ('1 ', '2', '3 ');
cardinal_lista = новый Array ("Первый", "Второй", "Третий");
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;
для (я = 0; <lista.length я, я + +) (
; VAR = nome_opcao список [я];
= new Option ( nome_opcao ) ; select_alvo.options [г] = новый вариант (nome_opcao);
)
)
</> Script
</ SCRIPT> </> голову
<body>
method = "post" action = "exemplo.php" > <Форма имя = "formulario_de_exemplo" методом "должность" действие = "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. Включите выбора входного < тип = "радио" имя = "образец" значение = "число" OnClick = "trocarSelect ('formulario_de_exemplo', 'Выбор', 'номер');" /> номер или <ввод типа = " радио "имя =" образец "значение =" Кардинал "OnClick =" trocarSelect ('formulario_de_exemplo', 'Выбор', 'Кардинал'); "/> кардинал.
<Br />
> <Выберите имя = "отбор">
> Clique em um botão radio qualquer </option> <Вариант значение = "пустые"> Нажмите переключатель для всех </> вариант
</ Select>
</ P>
</> Формы
</> Органа
</ HTML>