Smyslové setrvačnosti "Vybrat dynamické

Vybrat Dynamické

Komentáře 8 Dameris / Los_Angeles října 2005 v rámci Javascript .
Tagy:

On 09.3.2005, jsem publikoval Úvod do Ajax . Jak jsem vzal rychlý ráno na zásadní otázky, jako je DOM a XMLHttpRequest, jsem se rozhodl, že nastal čas ukázat více praktických příkladů současné situace nebo zajímavé, kde můžete použít Ajax a knihovna CPAINT .

Pak jsem vás naučí, jak změnit hodnoty <select>, také volal combobox nebo drop-down menu. A v nadcházejícím článku, jak se mohou tyto hodnoty být vyměněny za návrat XML Ajax.

V podstatě, změna hodnoty <select> vyžaduje pouze jednu smyčku přes pole JavaScript. V serverové aplikace sama o sobě, mohli bychom stavět tento seznam s hodnotami v databázi, a ukazuje <head> v dokumentu. Nicméně si představit, že tento seznam by se to změnilo s ostatními uživateli akcí na stránce, například výběr položky do nákupního košíku. Proto bychom nechtěli celou stránku byla znovu naložena.

Jak změnit <select>

V JavaScriptu, pole se vrátil do document.forms [formulář] [select_nome]. Volby mohou mít přístup k možnosti <select>. První možnost se nachází v document.forms [formě] [select_nome]. Volby [0], a druhým je document.forms [formulář] [select_nome]. Volby [1], a tak dále.

Chcete-li zadat hodnotu, používáme nové Option (), která přijímá dva argumenty. Prvním z nich je text této možnosti, a druhý (volitelný), hodnota je.

Takže pokud bychom chtěli dát dvě možnosti v <select> jmenoval příklad formuláře s názvem formuláře, museli bychom udělat:

Prostý text

JavaScript:

formulario ] [ exemplo ] . options [ 0 ] = new Option ( "Primeira opção" , 1 ) ; dokument. formulářů [formulář] [příklad]. voleb [0] = new Option ("First Option", 1);
formulario ] [ exemplo ] . options [ 1 ] = new Option ( "Segunda opção" , 2 ) ; dokument. formulářů [formulář] [příklad]. možností [1] = new Option ("Druhou možností", 2);

V HTML je to ekvivalent pomocí:

Prostý text

HTML:

> <Vyberte name = "příklad">
> Primeira opção </option> <Možnost value = "1"> První volba </ option>
> Segunda opção </option> <Možnost value = "2"> Druhá volba </ option>
</ Výběr>

Ukážu vám kompletní příklad, se dvěma tlačítky na radio typu. První, po kliknutí bude měnit hodnota <select> čísel, a druhý pro kardinála.

Prostý 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> Dynamický Vybrat </ title>
> <Script type = "text / javascript">
numero_lista = new Array ('1 ', '2', '3 ');
cardinal_lista = new Array ("First", "druhý", "třetí");
trocarSelect funkce (formulario_nome, select_nome, lista_nome)
(
if (lista_nome == "číslo") (
var list = numero_lista;
Else ()
var list = cardinal_lista;
)
var select_alvo = document.forms [formulario_nome] [select_nome];
select_alvo.options.length = 0;
pro (i = 0; i <lista.length; i + +) (
; var nome_opcao = seznam [i];
= new Option ( nome_opcao ) ; select_alvo.options [i] = new Option (nome_opcao);
)
)
</ Script>
</ Script> </ head>
<body>
method = "post" action = "exemplo.php" > <Form name = "formulario_de_exemplo" method = "post" action = "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. Zapněte vybrat <vstupu type = "radio" name = "vzorek" value = "číslo" onClick = "trocarSelect ('formulario_de_exemplo', 'výběr', 'číslo');" /> číslo nebo <vstupu type = " Radio "name =" vzorek "value =" Kardinál "onClick =" trocarSelect ('formulario_de_exemplo', 'výběr', 'kardinál'); "/> kardinál.
<Br />
> <Vyberte name = "Výběr">
> Clique em um botão radio qualquer </option> <Možnost value = "prázdná"> Klikněte na přepínač žádný </ option>
</ Výběr>
</ P>
</ Form>
</ Body>
</ Html>