Avatar billede nr-one Nybegynder
14. februar 2009 - 21:20 Der er 9 kommentarer og
1 løsning

Swap Options og XHTML

Hej eksperter,

Jeg må ærlig indrømme jeg ikke er ekspert til JS, overhovedet, men jeg har dog et spørgsmål, denne kode virke fint, hvis jeg ikke bruger XHTML, tilføjer jeg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

vil scriptet ikke længere virke, jeg forstår det ikke helt, må jeg indrømme!

Kan i hjælpe?

<head>

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

<title>Test</title>

<script type="text/javascript">
//<![CDATA[

var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");

function swapOptions(the_array_name) {
    var numbers_select = search_form.model;
    var the_array = eval(the_array_name);
    setOptionText(search_form.model, the_array);
}

function setOptionText(the_select, the_array) {
    for (loop=0; loop < the_select.options.length; loop++) {
        the_select.options[loop].text = the_array[loop];
    }
}
//]]>

</script>

</head>

<body>

<form name="search_form" method="get" action="test.php">
<select name="factory" onChange="swapOptions(this.form.factory.options[selectedIndex].value);">
<option value="dogs" selected>Dogs</option>
<option value="fish">Fish</option>
<option value="birds">Birds</option>
</select>

<select name="model" >
<option>poodle</option>
<option>puli</option>
<option>greyhound</option>
</select>
<input type="submit" name="submit" value="submit" />

</form>

</body>
</html>
Avatar billede erikjacobsen Ekspert
14. februar 2009 - 21:54 #1
Giv de elementer, du bruger, en id, og brug så document.getElementById til at få fat på dem.
Avatar billede erikjacobsen Ekspert
14. februar 2009 - 22:00 #2
Dvs fx

  <select name="model" id="model">

og erstat
  var numbers_select = search_form.model;
med
  var numbers_select = document.getElementById("model");

og evt andre steder
Avatar billede nr-one Nybegynder
14. februar 2009 - 22:11 #3
super det virkede, jeg har dog et andet spørgsmål, hvis du har tid/lyst og ved hvordan det kan laves, denne funktion, har jeg fundet ud af kun virker hvis man har det antal options der skal være, jeg skal bruge den til et lang formel, hvor jeg vælger bilmærke og så kommer alle moddeller fra det valgte mærke.

Hvis du kan følge mig? har prøvet lidt af hvert, det eneste jeg kan komme frem til er en hel anden kod format på onchange, hvor den simpelhen skifter indholdet af en hel div, så mine variabler indeholder hele select boxen og ikke kun valuesene som skal i som her.
Avatar billede erikjacobsen Ekspert
14. februar 2009 - 22:17 #4
Kig på de to her

http://www.plus2net.com/javascript_tutorial/list-remove.php
http://www.plus2net.com/javascript_tutorial/list-adding.php

Alternativt ha' dine select-boxe lavet på forhånd, og vis kun den relevante (du kan sætte display til none)
Avatar billede nr-one Nybegynder
14. februar 2009 - 22:43 #5
Super. Det var næste det jeg søgte efter, jeg har så gået frem med en lidt anden slagsteknik:

function modeloption() { /* Scriptet er en inspiration fra http://www.webmasterworld.com/javascript/3290376.htm */

var alle  =    ('<select name="model"><option title="alle" value="">- alle</option></select>');
var audi  =    ('<select><option>- alle</option><option>A1</option><option>A2</option><option>A3</option></select>');
var vw      =    ('<select><option>- alle</option><option>Golf</option><option>Golf 2</option></select>');
var seat  =  ('<select><option>- alle</option><option>Seat</option><option>Seat 2</option></select>');

var mylist=document.getElementById("info")
var val = document.getElementById("model").innerHTML=mylist.options[mylist.selectedIndex].title

if ( val == "alle" ) { document.getElementById("model").innerHTML = alle; }
if ( val == "audi" ) { document.getElementById("model").innerHTML = audi; }
if ( val == "vw" )     { document.getElementById("model").innerHTML = vw;  }
if ( val == "seat" ) { document.getElementById("model").innerHTML = seat; }

}

som virker sådan ca efter hensigten :) hehe. Den kan sikkert optimeres meget mere, men kom da frem til det jeg enlig gerne ville.

Har lige et andet spørgsmål når jeg har en guro som dig, jeg mangler os noget java som gør, når jeg har udfyldt en <input type="file" />, at der så skal komme en ny frem, og den gamle stadig skal blive der (Max 10 felter i alt).

Ellers bare læg et svar, for at få dine point :)
Avatar billede erikjacobsen Ekspert
14. februar 2009 - 22:53 #6
Jeg samler slet ikke på point, tak.

Man kan slet ikke bruge innerHTML i XHTML 1.x. At browserne tillader det, må være en fejl. De links jeg foreslog virker egentlig heller ikke i XHTML. Men browserne lader det ske alligevel. Hvorfor vil du bruge XHTML, når der slet ikke er nogen sammenhæng mellem specifikationen, og implementationen? Og når XHTML 1.x aldrig har været ment til at køre i virkeligheden. Læs selv på w3.org.

Mht til input felter, der dukker op automatisk er der et par muligheder. Igen: lav dem på forhånd, og vis dem efterhånden. Eller lav dem løbende med document.createElement - google er din ven ;)
Avatar billede olebole Juniormester
14. februar 2009 - 23:28 #7
<ole>

Skriv denne kode i body'en i et HTML-dokument:

<script type="text/javascript">
function foo() {
    var oParagraph = document.getElementById("fooBar");
    oParagraph.innerHTML += "<input type='text' name='blabla' value='Øv, noget skod!'>";
}
</script>

<button onclick="foo()">TEST</button>

<p id="fooBar"><input type="text" name="bla"></p>

Load derefter dokumentet i Firefox eller Opera - skriv noget i tekstfeltet og tryk på knappen. Som du ser, slettes indholdet af tekstfeltet.

Udover, at innerHTML aldrig har været valid i nogen standard - men er et levn fra Netscape og Explorer 4 browsernes proprietære DOM - indebærer brugen af den meget ofte slemme uhensigtsmæssigheder.

/mvh
</bole>
Avatar billede nr-one Nybegynder
16. februar 2009 - 19:13 #8
Tak for hjælpen begge, det sidste script var meget sjovt at se i aktion :)

Jeg satte mig ned, og fandt frem til det du nok var efter erik, fik det her ud af det:

<script type='text/javascript'>

function factoryOnChange() {
    if (document.details.factory.value == "alle") {
        document.details.audi.style.display = 'none';
        document.details.seat.style.display = 'none';
        document.details.vw.style.display = 'none';
        document.details.alle.style.display = 'inline';
    }
    if (document.details.factory.value == "audi") {
        document.details.audi.style.display = 'inline';
        document.details.seat.style.display = 'none';
        document.details.vw.style.display = 'none';
        document.details.alle.style.display = 'none';
    }
    if (document.details.factory.value == "seat") {
        document.details.audi.style.display = 'none';
        document.details.seat.style.display = 'inline';
        document.details.vw.style.display = 'none';
        document.details.alle.style.display = 'none';
    }
    if (document.details.factory.value == "vw") {
        document.details.audi.style.display = 'none';
        document.details.seat.style.display = 'none';
        document.details.vw.style.display = 'inline';
        document.details.alle.style.display = 'none';
    }
}

<form name='details' method='get' action='search.php'>
<select name="factory" onchange='factoryOnChange();'>
<option value="">- alle</option>
<option value="audi">Audi</option>
<option value="vw">Volkwargen</option>
<option value="seat">Seat</option>
</select>
               
<select name='audi'style="display:none;">
</select>
</form>

osv. Bare hvis andre nogensinde for brug for noget så simpelt, som det enlig var!

Hvis du stadig ikke ønsker point, så tar' jeg den bare selv lidt senere :)
Avatar billede olebole Juniormester
18. august 2009 - 22:15 #9
Med hensyn til XHTML, bør du måske læse her:
    http://dengodekode.dk/xhtml
Avatar billede nr-one Nybegynder
18. august 2009 - 22:34 #10
Haha, se der lærte jeg noget nyt :)
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