Avatar billede perfi Nybegynder
19. april 2002 - 14:13 Der er 7 kommentarer og
1 løsning

Opdatere en dropdownboks uden reload----

Hej der.

jeg henter data til en dropdown boks med et kald fra database. Det går fint.

MEN - jeg ønsker at addere flere poster til dropdownboksen fra klientsiden ("uden at reloade via et DB kald."), via 2 teksfelter. tekstfelt 1 skal indsættes i "value" og tekstfelt 2 sættes ind i "text"
(<option value="tekstfeltværdi nr. 1">"tekstværdi 2"</option>)

Altså dynamisk opdatereing af dropdownboksen.
Er der en eller anden der har en SIMPEL kode til det.

(-: PERFI  :-)
Avatar billede jakoba Nybegynder
19. april 2002 - 14:43 #1
script i head:
<script type='text/javascript'>

function addOption( selObjTil, selObjFra ) {
    var optTra = selObjfra.options[ selObjFra.selectedIndex ];

    selObjTil.options[ selObjTil.options.length ] = new Option();
    var optTil = selObjTil.options[ selObjTil.options.length-1 ];

    optTil.value = optFra.value;
    optTil.text = optFra.text;
}; //end addOption( Select object, Select object )

</script>


<form name=formnavn>

<select name='boksfra' onchange="addOption( this.form.bokstil, this );">
  <option value="tekstfeltværdi nr. v1">"tekstværdi t1"</option>
  <option value="tekstfeltværdi nr. v2">"tekstværdi t2"</option>
  <option value="tekstfeltværdi nr. v3">"tekstværdi t3"</option>
  <option value="tekstfeltværdi nr. v4">"tekstværdi t4"</option>
</select>

<select name='bokstil'>
  <option value="DBværdi nr. v1">"DBtekst t1"</option>
  <option value="DBværdi nr. v2">"DBtekst t2"</option>
  <option value="DBværdi nr. v3">"DBtekst t3"</option>
  <option value="DBværdi nr. v4">"DBtekst t4"</option>
</select>

</form>

mvh JakobA
Avatar billede jakoba Nybegynder
19. april 2002 - 14:45 #2
Ups. første linie i funktion :
    var optFra = selObjFra.options[ selObjFra.selectedIndex ];
Avatar billede jakoba Nybegynder
19. april 2002 - 14:47 #3
men alt for langt når man tænker sig om:

<script type='text/javascript'>

function addOption( selObjTil, selObjFra ) {
    var optFra = selObjFra.options[ selObjFra.selectedIndex ];
    selObjTil.options[ selObjTil.options.length ] = new Option( optFra.text, optFra.value );
}; //end addOption( Select object, Select object )

</script>
Avatar billede perfi Nybegynder
19. april 2002 - 15:04 #4
hej jakoba...

Ja, den har jeg også støt over den funktion, og som fungere fint, men det jeg vil er at taste value og text ind manuelt i 2 <input type="text">  bokse, så den ene inputværdi blive til value i OPTION og den anden inputværdi blive TEXT i samme OPTION.... Jeg sidder lidt selv og prøver mig frem. ER IKKE STÆRK i JS, men her er hvad jeg er kommet frem til

var optionNo = 0;;
function addNewOption(g, h)
{
  optionNo += 1;
  oNewOption = new Option();
  oNewOption.text = h ;
  oNewOption.value = g;
  oSelect.add(oNewOption, 1);
}
function setOption()
{
result.value="HER SKULLE INDHOLDET AF INPUT SÅ KOMME UD";
}
// -->
</SCRIPT>
<form name="test">

<INPUT TYPE="text" name="VALG">
<INPUT TYPE="text" name="TEKST" onchange="addNewOption(this.form.VALG.value, this.form.TEKST.value)">
</form>
<SELECT ID="oSelect" onchange="setOptiom()";>
<OPTION>
</SELECT>
<input type="text" name="result">

Det kan være du kan hitte ud af resten!!!!
Avatar billede perfi Nybegynder
19. april 2002 - 15:53 #5
Når, men jeg fik fikset den selv, men giver dig alligevel de 30 point jakoba, da du fik mig på rette køl. TAK :-)

<html>
<body>
<SCRIPT>
<!--
var optionNo = 0;;
function addNewOption(g, h)
{
//lægger værdier i min database - serversiden
  var streng="insert into MinDatabasetabel (attribut1, attribut2) values(g, 'h')";
  Conn.Execute(streng);
//lægger værdier til dropdownboksen på klientsiden(dvs, uden reload)
  optionNo += 1;
  oNewOption = new Option();
  oNewOption.text = g+"-"+h ;
  oNewOption.value = g;
  test.oSelect.add(oNewOption, 1);
}

function setOption(OptParam)
{
// bare for at teste resultatet i en input
test.result.value=OPTParam ;
}
// -->
</SCRIPT>
<form name="test">
<INPUT TYPE="text" name="VALG">
<INPUT TYPE="text" name="TEKST" onchange="addNewOption(this.form.VALG.value, this.form.TEKST.value)">
<SELECT id="oSelect" onchange="setOption(this.form.oSelect.value)">
<OPTION>
</SELECT>
<input type="text" name="result"></form>
</form>
</body>
</html>


- PERFI -
Avatar billede jakoba Nybegynder
19. april 2002 - 16:00 #6
Jeg ville definitivt ikke bruge onchange på tekstfeltet til at sætte den nye option ind. Nogen brovere siger "nu er den ændret" for hvert bogstav du taster og det bliver til mange gylle options.

men fx:
<script type='text/javascript'>

function addOption( formObj, selObjTil ) {
    selObjTil.options[ selObjTil.options.length ] = new Option( formObj.txt.value, formobj.val.value );
}; //end addOption( Form object, Select object )

</script>



<form name=formnavn>

Tekst: <input type='text' name='txt' value=""><br>
Værdi: <input type='text' name='val' value="">
<input type='button' value="indsæt"
    onclick="addOption( this.form, this.form.bokstil );"
    ><br>

<select name='bokstil'>
  <option value="DBværdi nr. v1">"DBtekst t1"</option>
  <option value="DBværdi nr. v2">"DBtekst t2"</option>
  <option value="DBværdi nr. v3">"DBtekst t3"</option>
  <option value="DBværdi nr. v4">"DBtekst t4"</option>
</select>

</form>
Avatar billede jakoba Nybegynder
19. april 2002 - 16:01 #7
takker
Avatar billede perfi Nybegynder
19. april 2002 - 21:43 #8
Hej jakoba

Ja, det har du ret i, men det var også kun en lille test script til at lige få ideén bag. formen bliver selvfølgelig submittet ved et klik....

:-) PERFI
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester