Søg
Avatar billede sbay Nybegynder
29. juni 2007 - 22:46 Der er 9 kommentarer og
1 løsning

Vise flere felter afhængigt af valg i en dropdown

Hejsa

Jeg har hørt at man vha. af AJAX kan få vist flere felter, afhængigt af f.eks et valg i en dropdown box. Er der en der kan forklare eller komme med eksempler? Ideen er at siden IKKE skal refreshe! Jeg bruger PHP til resten af koden!

Eksempel:
Jeg kan vælge mellem BIL og CYKEL. Vælger jeg BIL, skal der vises flere felter på siden med f.eks Farve, Årgang mv.
Vælger jeg CYKEL, skal jeg have vist felter med Mærke og Antal_gear.
Avatar billede kalp Novice
29. juni 2007 - 22:53 #1
det skal du skam bare lave i ren javascript!
Avatar billede kalp Novice
29. juni 2007 - 23:04 #2
et lille eksempel

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<script type="text/javascript">
    function showBox(caller)
    {
      if(caller == 'bil'){
          document.getElementById('icon').style.visibility = 'visible';
        }
        else{
        document.getElementById('icon').style.visibility = 'hidden';
        }
    }
</script>
</head>
<body>
Producent: <input type="text" id="producent" name="producent" /><br/>
Type: <input type="text" id="model" name="model" /><br/>



<div style="visibility:hidden;" id="icon">
Engine size: <input type="text" id="engine" name="engine" />
<br/>
</div>
<input type="radio" name="grouped" id="bil" onclick="showBox(this.id)">Bil<br />
<input type="radio" name="grouped" id="cykel" onclick="showBox(this.id)">Cykel
</body>
</html>
Avatar billede sbay Nybegynder
29. juni 2007 - 23:32 #3
Ok

Jeg har lavet koden således, fpr også at få et felt på når jeg vælger cykel. Men med 12 valgmuligheder - og 10-15 felter pr valgmulighed, synes jeg dog hurtigt koden vil komme til at virke lidt uoverskuelig! Et andet problem, er at jeg ikke kan få felterne til at stå samme sted! Wheelsize og engine size skulle da gerne kunne stå samme sted!
Avatar billede sbay Nybegynder
29. juni 2007 - 23:33 #4
ups - her er koden:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<script type="text/javascript">
    function showBox(caller)
    {
      if(caller == 'bil'){
          document.getElementById('icon').style.visibility = 'visible';
          document.getElementById('icon1').style.visibility = 'hidden';

        }
        else{
        document.getElementById('icon1').style.visibility = 'hidden';
        }
    }
        function showBox1(caller)
    {
      if(caller == 'cykel'){
          document.getElementById('icon1').style.visibility = 'visible';
          document.getElementById('icon').style.visibility = 'hidden';

        }
        else{
        document.getElementById('icon1').style.visibility = 'hidden';
        }
    }
</script>
</head>
<body>
Producent: <input type="text" id="producent" name="producent" /><br/>
Type: <input type="text" id="model" name="model" /><br/>



<div style="visibility:hidden;" id="icon">
Engine size: <input type="text" id="engine" name="engine" />
</div>
<div style="visibility:hidden;" id="icon1">
Wheel size: <input type="text" id="wheel" name="wheel" />
<br/>
</div>
<input type="radio" name="grouped" id="bil" onclick="showBox(this.id)">Bil<br />
<input type="radio" name="grouped" id="cykel" onclick="showBox1(this.id)">Cykel
</body>
</html>
Avatar billede kalp Novice
30. juni 2007 - 00:21 #5
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<script type="text/javascript">
    function showBox(caller)
    {
      if(caller == 'bil'){
          document.getElementById('icon').style.visibility = 'visible';
          document.getElementById('icon1').style.visibility = 'hidden';

        }
        else{
        document.getElementById('icon1').style.visibility = 'hidden';
        }
    }
        function showBox1(caller)
    {
      if(caller == 'cykel'){
          document.getElementById('icon1').style.visibility = 'visible';
          document.getElementById('icon').style.visibility = 'hidden';

        }
        else{
        document.getElementById('icon1').style.visibility = 'hidden';
        }
    }
</script>
</head>
<body>
Producent: <input type="text" id="producent" name="producent" /><br/>
Type: <input type="text" id="model" name="model" /><br/>



<div style="visibility:hidden;position:absolute" id="icon">
Engine size: <input type="text" id="engine" name="engine" />
</div>
<div style="visibility:hidden;position:absolute" id="icon1">
Wheel size: <input type="text" id="wheel" name="wheel" />
<br/>
</div>
<div style="margin-top:5px">
<br />
<input type="radio" name="grouped" id="bil" onclick="showBox(this.id)">Bil<br />
<input type="radio" name="grouped" id="cykel" onclick="showBox1(this.id)">Cykel
</div>
</body>
</html>
Avatar billede roenving Novice
30. juni 2007 - 17:31 #6
Hrm, jeg ville nu godt nok tænke en hel del anderledes mht. placeringen, scriptet og grundelementet, hvis det virkelig er rigtigt, at der er 12 muligheder med mange felter, et forkortet eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vis forskellige felter efter valg i select</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
.feltDiv{display:none;}
</style>
<script language="javascript" type="text/javascript">
var oldOpt = null;
function showActFields(sel){
  if(oldOpt)
    oldOpt.style.display = "none";
  if(sel.selectedIndex>0){
    oldOpt = document.getElementById("option" + sel.selectedIndex);
    oldOpt.style.display = "block";
  }
}
</script>
</head>
<body>
<form id="minForm" name="minForm">
  Vælg Emne:
  <select name="valgtEmne" onchange="showActFields(this);">
    <option>Vælg emne</option>
    <option value="bil">Bil</option>
    <option value="cykel">Cykel</option>
    <option value="motorbåd">Motorbåd</option>
  </select>
  <div id="option1" class="feltDiv">
    Motorstørrelse: <input type="text" name="engineSize"><br>
    Geartype: <input type="radio" name="gearType" value="automatic">Automatisk - <input type="radio" name="gearType" value="manual">Manuel<br>
  </div>
  <div id="option2" class="feltDiv">
    Hjulstørrelse: <input type="text" name="wheelSize"><br>
    Antal gear:
    <select name="numGears">
      <option value="gear1">Uden gear</option>
      <option value="gear2">2 gear</option>
      <option value="gear3">3 gear</option>
      <option value="gear5">5 gear</option>
      <option value="gear7" selected="selected">7 gear</option>
      <option value="gear10">10 gear</option>
      <option value="gear15">15 gear</option>
      <option value="gear21">21 gear</option>
    </select>
  </div>
  <div id="option3" class="feltDiv">
    Antal motorer:
    <select name="numMotors">
      <option value="motorinboard">1 indenbordsmotor</option>
      <option value="motor1" selected="selected">1 hækmotor</option>
      <option value="motor2">2 hækmotorer</option>
    </select>
  </div>
</form>
</body>
</html>
Avatar billede sbay Nybegynder
24. juli 2007 - 13:55 #7
roenving -> smid et svar :-)

ps. kan man få det til at virke på checkboxes eller radiobuttons?
Avatar billede roenving Novice
25. juli 2007 - 17:44 #8
Da visningen styres via divs, der omkranser de felter, der skal vises eller skjules, har det ingen betydning, hvilken type elementer, der placeres inde i de divs !-)

Velbekomme '-)
Avatar billede roenving Novice
27. juli 2007 - 17:36 #9
-- og tak for point ;~}
Avatar billede sbay Nybegynder
29. juli 2007 - 16:26 #10
kan desværre ikke rigtigt få det til at virke med checkbox:

function showActFields(sel){
  alert ("aaa"+sel);
    alert ("bbb");
   
    oldOpt = document.getElementById("checkbox"+ sel.value);
    alert (oldOpt);
    oldOpt.style.display = "block";
}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »