Sensoriske inerti "Vælg dynamisk

Vælg Dynamic

Kommentarer 8 oktober 2005 i Javascript.
Tags:

On 03/09/2005, offentliggjorde jeg en introduktion til Ajax. Så tog jeg et hurtigt blik på de store spørgsmål, som DOM og XMLHttpRequest, besluttede jeg det var tid til at vise flere eksempler på aktuelle situationer og steder, hvor du kan bruge Ajax og biblioteket CPAINT.

Så vil jeg lære dig, hvordan du ændrer værdierne i et <select>, også kaldet en combobox eller drop-down menuen. Og i en kommende artikel, hvordan disse værdier kan veksles til en tilbagevenden XML Ajax.

I bund og ændre værdierne af en <select> kræver kun en løkke på en vifte af JavaScript. På samme ansøgning på serveren, kan vi opbygge denne liste tager værdier i databasen, og viser i <head>. Men lad os forestille os, at denne liste vil ændre sig med andre aktioner i brugervejledningen side, for eksempel et udvalg af produkter til en indkøbsvogn. Derfor vil vi ikke ønsker, at hele siden genladning.

Hvordan man ændre <select>

I Javascript,] array returneres af document.forms [form [select_nome]. Valg kan få adgang til de muligheder <select>. Den første mulighed er beliggende i document.forms [form] [select_nome]. Options [0], og den anden er i document.forms [form] [select_nome]. Options [1], og så videre.

At angive en værdi, bruger nye Alternativ (), som accepterer to argumenter. Den første er teksten til den mulighed, og den anden (ekstraudstyr), værdien af det.

Så hvis vi ønskede at sætte to valgmuligheder i <select> kaldes et eksempel på en form kaldet form, vi ville:

Almindelig tekst

JavaScript:

formulario ] [ exemplo ] . options [ 0 ] = new Option ( "Primeira opção" , 1 ) ; dokument. former [form] [eksempel]. options [0] = new Option ( "Første valgmulighed", 1);
formulario ] [ exemplo ] . options [ 1 ] = new Option ( "Segunda opção" , 2 ) ; dokument. former [form] [eksempel]. options [1] = new Option ( "Anden valgmulighed", 2);

I HTML, er dette svarer til hjælp:

Almindelig tekst

HTML:

> <vælg name = "exemplo">
> Primeira opção </option> <option "1" værdi => Første indstilling </ option>
> Segunda opção </option> <option "2" værdi => Anden indstilling </ option>
</ Select>

Lad mig vise dig et komplet eksempel, med to knapper af type radio. Den første, når der klikkes, vil ændre værdien af <select> til numre, og den anden til kardinal.

Almindelig tekst

HTML:

DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
End Sub "http://www.w3.org/1999/xhtml">
<head>
<title> Dynamisk Vælg </ title>
> <script type = "text/javascript">
numero_lista = new Array ( "1", "2", "3");
cardinal_lista = new Array ( "Første", "Anden", "Third");
trocarSelect funktion (formulario_nome, select_nome, lista_nome)
(
if (lista_nome == "number") (
var liste = numero_lista;
) Else (
var liste = cardinal_lista;
)
var select_alvo = document.forms [formulario_nome] [select_nome];
select_alvo.options.length = 0;
for (i = 0; i <lista.length i + +) (
; var nome_opcao = list [i];
= new Option ( nome_opcao ) ; select_alvo.options [i] = new Option (nome_opcao);
)
)
</ Script>
</ Script> </ head>
<body>
method = "post" action = "exemplo.php" > <form "formulario_de_exemplo" name = metode = "post" "exemplo.php" handling =>
<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. Tænd vælge <input "radio" type = name = værdi "exemplo" = "numero" onClick = "trocarSelect('formulario_de_exemplo','selecao','numero');" /> nummer eller <input type = " radio "name =" prøve "value =" Kardinal "onClick =" trocarSelect ( 'formulario_de_exemplo', 'Vælg', 'Cardinal'); "/> kardinal.
<br />
> <vælg name = "selecao">
> Clique em um botão radio qualquer </option> <option "vazio" værdi => Klik på en alternativknap enhver </ option>
</ Select>
</ P>
</ Form>
</ Body>
</ Html>

Snart vil jeg udgive en anden artikel om at køre den vifte af nye værdier for <select> med XML returneres af Ajax.

Levi
I denne operation jeg kan have som følge af vælge 1, 2, 3 eller første, andet, tredje.
Hvordan kan jeg registrere i databasen det resultat, at jeg vælge?

blog comments powered by Disqus