Vis inputfelter alt efter valg i dropdown

Hej,
Har prøvet at lave et simpelt eksempel med jQuery herunder (ikke testet).
Håber at det åbner op for nogle idéer og muligheder for dig.

<select name='Type' id="type>
<option value="pdf">PDF</option>
<option value="link">Link</option>
</select>
<div id="pdf_step2" style="display:none">
<!-- Her er step 2 (hvis pdf valgt) -->
</div>
<div id="link_step2" style="display:none">
<!-- Her er step 2 (hvis link er valgt) -->
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('select#type').change(function() {
      var result = $('select#type option:selected').val()
      if (result == 'pdf') {
        $('#pdf_step2').show();
      } else if (result == 'link') {
        $('#link_step2').show();
      }
    });
  });
</script>

Tak for bidraget, men det virker ikke umiddelbart.

1. Jeg har indlæst ...src="script/jquery.js"
2. Jeg definerer script-koden før <select>
3. Jeg har sat id på <select>
4. Jeg har sat value på <option>
5. Jeg sætter DIV som anført.

Men der har ikke ændret noget i afviklingen.

Jeg har lavet en test side ud fra ovenstående, som bruger jQuery.
Koden er:
Håber du kan bruge det og så god nytår!

Tak for bidraget. Jeg kan godt se, at det isoleret virker, men jeg bøvler med at få det til at virke sammen med min egen kode.

Jeg bøvler videre og vender tilbage.

Så tror jeg, at jeg fandt ud af det.

I min opstilling af siden anvender jeg tabeller, hvorfor mine inputfelter er placeret i celler.

Er der en løsning for dette eller skal jeg igang med noget <div>

Kan du give et eksempel på dine tabeller?

Jeps - kommer her:

<table width='830px' cellpadding='2' cellspacing='2'>
                <tr>
                    <td colspan='2' style='height:20px;background-color: #66ccff;padding:5px;'><span class='textoverskriftStor'>OPRET DOKUMENT/LINK</span></TD>
                </tr>
                <tr>
                    <td width='150px'><span class=text4>Type:</span></td>
                    <td width='680px'><img class='tooltip' src='gfx/info1.gif' alt='$h802' style='cursor:help;'/> <span class=text4>
                    <select id='type' name='opretType' class='form'>
                    <option value='pdf'>PDF-dokument  </option>
                    <option value='link'>Link</option>
                    </select></td>
                </tr>
                <div id='pdf' style='display:none;'>
                <tr>
                    <td><span class=text4>Vælg PDF-dokument:</span></td>
                    <td><img class='tooltip' src='gfx/info1.gif' alt='$h803' style='cursor:help;'/> <input type='file' size='75' name='file_field'></td>
                </tr>
               
                <tr>
                    <td><span class=text4>Dokumentets URL:</span></td>
                    <td><img class='tooltip' src='gfx/info1.gif' alt='$h804' style='cursor:help;'/> <input type='text' class='form' name='opretUrl' size='75' maxlength='75' onfocus=\"this.style.backgroundColor='#$row2[form_bg_aktiv]';\" onblur=\"this.style.backgroundColor='#$row2[form_bg]';\"></td>
                </tr>
                </div>
                <div id='link' style='display:none;'>
                <tr>
                    <td><span class=text4>Dokumentbeskrivelse:</span></td>
                    <td><img class='tooltip' src='gfx/info1.gif' alt='$h805' style='cursor:help;'/> <input type='text' class='form' name='opretTekst' size='75' maxlength='75' onfocus=\"this.style.backgroundColor='#$row2[form_bg_aktiv]';\" onblur=\"this.style.backgroundColor='#$row2[form_bg]';\"></td>
                </tr>
                </div>
                <tr>
                    <td><span class=text4>Vejledningstekst:</span></td>
                    <td><img class='tooltip' src='gfx/info1.gif' alt='$h806' style='cursor:help;'/> <input type='text' class='form' name='opretVejledning' size='75' maxlength='75' onfocus=\"this.style.backgroundColor='#$row2[form_bg_aktiv]';\" onblur=\"this.style.backgroundColor='#$row2[form_bg]';\"></td>
                </tr>
                <tr>
                    <td><span class=text4>Rækkefølge:</span></td>
                    <td><img class='tooltip' src='gfx/info1.gif' alt='$h807' style='cursor:help;'/> <input type='text' class='form' name='opretRaekkefoelge' size='3' maxlength='2' onfocus=\"this.style.backgroundColor='#$row2[form_bg_aktiv]';\" onblur=\"this.style.backgroundColor='#$row2[form_bg]';\"></td>
                </tr>
            </table>

Hvis du ikke gider bruge dine divs rundt om tr's så giv dine tr's id's og hide dem på samme måde som du gør med div'en.

<ole>

Nej, du kan ikke gemme tabelceller på samme måde, som du gemmer div (eller andre) elementer. Tabelceller og -rækker kan ikke have display:block. Tabelrækker skal gives display:table-row og celler display:table-cell, men da understøttelsen af de korrekte værdier historisk har været rigtig skidt understøttet, er det noget bøvl at arbejde med.

Mit bedste råd: Drop tabellayoutet og brug andre elementer  =)

/mvh
</bole>

"Hvis du ikke gider bruge dine divs rundt om tr's" >> Det er der ingen med bare et minimalt indblik i webkode, der kunne finde på at gøre (eller foreslå) - så det "gider" spørgeren med statsgaranti ikke  *o)

Man ved jo aldrig, når spørgeren kunne finde på at bruge table-layout ;-)

Det er da noget frygtelig vrøvl! At lægge DIV rundt om TR elementer resulterer i hamrende invalid kode. Der er intet somhelst invalidt i at bruge tabeller til layout. Det er uhensigtsmæssigt, men på ingen måde 'ulovligt' i forhold til gældende standarder

Jeg forstår, at brug af <table> ikke er ideelt, hvorfor jeg nu har lavet noget DIV, hvilket jeg bestemt ikke er nogen ørn til.
Men jeg kan ikke få det til at spille korrekt.

Jeg har fx. lavet min kode sådan her:

<div id='pdf' style='display:none;'>
    <div class='celleVenstre'>
        <span class=text4>Vælg PDF-dokument:</span>
    </div>
    <div class='celleHoejre'>
        <input type='file' size='75' name='file_field'>
    </div>
</div>

Uanset om jeg i min drop down vælger PDF eller Link, så vises disse 2 blokke ikke.

Min Select er defineret således:
<select id='type' name='opretType' class='form'>
<option value='pdf'>PDF</option>
<option value='link'>Link</option>
</select>

Og javascriptkoden er præcis som angivet ovenfor i #3

Min CSS ser sådan her ud:
.celleVenstre {
    float:left;
    width: 150px;
    height: 30px;
}
.celleHoejre {
    float:left;
    width: 660px;
    height: 30px;
}

Lukketid. Jeg fik det til at virke ved hjælp fra en 3. person, og Roxki.