Sensorische inertie "Selecteer Dynamic

Selecteer Dynamische

Reacties 8 Dameris / Los_Angeles oktober 2005 in het kader Javascript .
Tags:

Op 03/09/2005, publiceerde ik een kennismaking met Ajax . Zoals ik nam een snelle ochtend op de grote vraagstukken, zoals DOM en XMLHttpRequest, besloot ik dat het tijd was om te laten zien bibliotheek meer praktische voorbeelden van actuele situaties of interessant is, waar u kunt gebruik maken van Ajax en de CPAINT .

Dan zal ik je leren hoe je <select> veranderen de waarden van een, ook wel de combobox of drop-down menu. En in een aanstaande artikel, hoe deze waarden kunnen worden ingewisseld voor een terugkeer XML Ajax.

In essentie, het veranderen van de waarden van een <select> vereist slechts een lus over een array van JavaScript. In de server applicatie zelf, kunnen we deze lijst op te bouwen met de waarden in de database en het tonen van <head> binnen het document. Echter, stel je voor dat deze lijst zou veranderen met andere acties van de gebruiker op de pagina, bijvoorbeeld, een selectie van objecten aan een winkelwagentje. Zo willen we niet de hele pagina opnieuw geladen.

Hoe een verandering <select>

In Javascript, de array geretourneerd door document.forms [formulier] [select_nome]. <select> Opties kunnen toegang krijgen tot de opties. De eerste optie is gelegen in document.forms [formulier] [select_nome]. Opties [0], en de tweede is document.forms [formulier] [select_nome]. Opties [1], en ga zo maar door.

Om een waarde te hebben, gebruiken we nieuwe Option (), die accepteert twee argumenten. De eerste is de tekst van de optie en de tweede (optioneel), de waarde ervan.

Dus als we wilden opties die twee in een <select> genoemd voorbeeld van een vorm genaamd vorm, zouden we doen:

PLAIN TEXT

JavaScript:

formulario ] [ exemplo ] . options [ 0 ] = new Option ( "Primeira opção" , 1 ) ; document. vormen [formulier] [voorbeeld]. opties [0] = new Option ("eerste optie", 1);
formulario ] [ exemplo ] . options [ 1 ] = new Option ( "Segunda opção" , 2 ) ; document. vormen [formulier] [voorbeeld]. opties [1] = new Option ('Tweede optie ", 2);

In HTML, dit is het equivalent van het gebruik van:

PLAIN TEXT

HTML:

> <Selecteer de naam = "voorbeeld">
> Primeira opção </option> <Optie value = "1"> Eerste optie </ option>
> Segunda opção </option> <Optie value = "2"> Tweede optie </ option>
</ Select>

Laat me je een volledig voorbeeld, met twee knoppen op de radio type. De eerste, wanneer erop wordt geklikt, zal de waarde van de <select> voor nummers, en de tweede voor de kardinaal.

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> Dynamic Selecteren </ title>
> <Script type = "text / javascript">
numero_lista = new Array ("1", "2", "3");
cardinal_lista = new Array ("First", "tweede", "derde");
trocarSelect functie (formulario_nome, select_nome, lista_nome)
(
if (lista_nome == "nummer") (
var list = numero_lista;
Else ()
var list = 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 lijst [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. Zet de te selecteren <input type = "radio" name = "monster" value = "aantal" onClick = "trocarSelect ('formulario_de_exemplo', 'selectie', 'aantal');" /> nummer of <input type = " radio "name =" monster "value =" kardinaal "onClick =" trocarSelect ('formulario_de_exemplo', 'selectie', 'Cardinal'); "/> kardinaal.
<Br />
> <Selecteer de naam = "selectie">
> Clique em um botão radio qualquer </option> <Optie value = "blank"> Klik op een keuzerondje een </ option>
</ Select>
</ P>
</ Form>
</ Body>
</ Html>

Binnenkort zal ik een ander artikel te publiceren over het bouwen van de array van nieuwe waarden voor de <select> met XML teruggegeven door Ajax.

Levi
In deze operatie kan ik hebben als gevolg van de SELECT-1, 2, 3 of de eerste, tweede, derde.
Hoe kan ik record in de database als gevolg dat ik selecteren?

blog commentaren die door Disqus worden aangedreven