Avatar billede JJ77 Juniormester
14. februar 2006 - 11:49 Der er 15 kommentarer og
1 løsning

To selectbokse

Kan man have to selectbokse under hinanden, hvor det den viser i nr. to boks er afhængig af det som vises i selectboks 1
Man skal kun kunne vælge select "gruppe" til at starte med, og derefter skal man kunne vælge "kategori", hvor det så er de kategorier som passer til gruppen som bliver vist.. Ved ikke om det kan lade sig gøre?

altså
gruppe1
-underkategori 1 til g. 1
-underkategori 2 til g. 1

gruppe2
-underkategori 1 til g. 2
-underkategori 2 til g. 2

<select name="gruppe" size="1">
        <option>V&aelig;lg gruppe..</option>
        <option value="gruppe1">gruppe1</option>            <option value="gruppe2">gruppe2</option>
        <option value="gruppe3">gruppe3</option>    </select>

                           
<select name="kategori" size="1">
        <option>V&aelig;lg kategori..</option>
        <option value="kat1">kat1</option>
        <option value="kat2">kat2</option>
        <option value="kat3">Kat3</option>
    </select>
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 12:03 #1
Det kan man godt. Finder lige et eks ...
Avatar billede horsmark Nybegynder
14. februar 2006 - 12:14 #2
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 12:14 #3
vores allesammens roenving har faktisk en demo her

http://roenving.users.whitehat.dk/index.html?/WD4Selects-beta.html

Sig hvis du behøver hjælp
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 12:15 #4
Her er min egen udgave:

<HTML>
<HEAD>
</HEAD>
<BODY onLoad="initSelects();">

<P>


<script language=JavaScript>
var arrProducenter = new Array();var arrVarer = new Array();
arrVarer[0] = Array(0,4088,"<ingen> Spil på wanasave");
arrVarer[1] = Array(23,4086,"LG U880 pink");
arrVarer[2] = Array(23,4087,"LG U880 sort");
arrVarer[3] = Array(8,4091,"Motorola RAZR V3i");
arrVarer[4] = Array(8,3705,"Motorola V3");
arrVarer[5] = Array(1,3659,"Nokia 3220");
arrVarer[6] = Array(1,4067,"Nokia 5140i");
arrVarer[7] = Array(1,3721,"Nokia 6020");
arrVarer[8] = Array(1,3734,"Nokia 6230i");
arrVarer[9] = Array(1,4090,"Nokia 6280");
arrVarer[10] = Array(1,4078,"Nokia 6680");
arrVarer[11] = Array(22,4084,"Poweriser 50 - 70 kg");
arrVarer[12] = Array(22,4071,"Poweriser 70 - 90 kg");
arrVarer[13] = Array(4,4077,"Samsung SGH D500");
arrVarer[14] = Array(4,4076,"Samsung SGH D600");
arrVarer[15] = Array(4,4089,"Samsung SGH E760");
arrVarer[16] = Array(4,4085,"Samsung SGH Z300");
arrVarer[17] = Array(2,4083,"Sony Ericsson K608i");
arrVarer[18] = Array(2,4023,"Sony Ericsson K750i");
arrVarer[19] = Array(2,4074,"Sony Ericsson W800i");
arrVarer[20] = Array(2,4079,"Sony Ericsson Z800i");
arrProducenter[0] = Array(0,"<ingen>");
arrProducenter[1] = Array(3,"Alcatel");
arrProducenter[2] = Array(20,"CBB");
arrProducenter[3] = Array(23,"LG");
arrProducenter[4] = Array(8,"Motorola");
arrProducenter[5] = Array(1,"Nokia");
arrProducenter[6] = Array(22,"Poweriser");
arrProducenter[7] = Array(21,"Qtek");
arrProducenter[8] = Array(4,"Samsung");
arrProducenter[9] = Array(5,"Siemens");
arrProducenter[10] = Array(2,"Sony Ericsson");
arrProducenter[11] = Array(12,"Taletidskort");
arrProducenter[12] = Array(13,"Telia");
</script>

<SCRIPT LANGUAGE=javascript>
<!--
var ProducentID = 0
var VareID = 0

function initSelects(){
    var f = document.selectForm
    var o = f.ProducentID.options
    o[0] = new Option("Vælg her", 0)
    var i;
    for (i=0;i<arrProducenter.length;i++){
        o[o.length] = new Option(arrProducenter[i][1], arrProducenter[i][0]);
        }
    for (i=2;i<o.length;i++){
        if (o[i].value == ProducentID){
            f.ProducentID.options[i].selected = true;
            getVarer(document.selectForm.ProducentID);
            i = 1000;
            }
        }
    }
   
function getVarer(objProducenter){
    var ProducentID = objProducenter.options[objProducenter.selectedIndex].value;
    var f = document.selectForm
    var o = f.VareID.options
    var l = o.length
    var i;
    for (i=0;i<l;i++) o[0] = null;
    o[0] = new Option("Vælg her, eller opret ny", 0)
    for (i=0;i<arrVarer.length;i++){
        if (arrVarer[i][0] == ProducentID) o[o.length] = new Option(arrVarer[i][2], arrVarer[i][1]);
        }
    for (i=1;i<o.length;i++){
        if (o[i].value == VareID){
            f.VareID.options[i].selected = true;
            i = 1000;
            }
        }
    }

//-->
</SCRIPT>


<form name=selectForm>
<select name=ProducentID onchange="getVarer(this);">
    <option value="0">Vælg her</option>
</select>
<select name=VareID>
    <option value="0">Vælg her</option>
</select>
</form>

</P>

</BODY>
</HTML>
Avatar billede horsmark Nybegynder
14. februar 2006 - 12:17 #5
btw <script language=JavaScript> er deprecated skal skrives <script type="text/javascript">
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 12:26 #6
Det bestemmer man vel selv. Hvis det, som her, er noget internt kode, som bare skal virke i MSIE, og ikke skal indexeres af søgemaskiner, så kunne man helt undlade det.

Spørgsmålet handler jo ikke om de finere nuancer i html. :o)
Avatar billede JJ77 Juniormester
14. februar 2006 - 12:28 #7
Ok.. rart at der findes en løsning...
men hvad nu hvis der fx kun skal være to at vælge mellem i den første selectboks "gruppe1" og "gruppe2"
og hver gruppe så skal have 3 forskellige underkategorier..
Kan du ikke pleace prøve at vise et eksempel med det du har skrevet Ida.. Det virker nemlig lidt vildt som det er nu :)
Avatar billede horsmark Nybegynder
14. februar 2006 - 12:30 #8
idanielsen >> nope men alligevel man kan ligesågodt få det rigtigt fra starten... :-)
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 12:53 #9
Det man bruger er dette:

var selectBox = document.myFormName.SelectboxName;
selectBox.options[0] = new Option("Teksten her", "Value her");

dette erstatter første option i box'en SelectboxName med en ny option, der har tekst og value som du ser angivet. sætter fx du en femte option ind i en box der kun har én i forvejen, så fyldes der automatiske tomme options ind imellem.


Når du skal fylde en box op påny er det nødvendigt at tømme den først:

var selectBox = document.myFormName.SelectboxName;
for (i=0;i<selectBox.options.length;i++) selectBox.options[0] = null;

Den siger "slet første option i boxen, lige så mange gange som der er options". Så er den tom.

med disse redskaber kan du lave det du ønsker. Det smarteste er at have data i nogle arrays, som jeg har det, hvor det fremgår hvilke værdier der skal ind, samt hvordan de hænger sammen.


Sådan har jeg gjort det:

arrProducenter[5] = Array(1,"Nokia");
- der er en producent der hedder "Nokia", med id 1. "Nokia" bliver teksten, og 1 bliver value.


arrVarer[5] = Array(1,3659,"Nokia 3220");
- denne vare er produceret af Nokia, det angives af 1-tallet. Teksten bliver "Nokia 3220" og value bliver 3659
Avatar billede horsmark Nybegynder
14. februar 2006 - 13:00 #10
idanielsen>> God fornuftig og fyldestgørende hjælp !! ;-)
Avatar billede JJ77 Juniormester
14. februar 2006 - 13:04 #11
TAKKER mange gange.. super duper :).... smider du ikke et svar IDA
Avatar billede ldanielsen Nybegynder
14. februar 2006 - 13:38 #12
Selv tak :o)

Kom igen hvis du ikke får det til at virke ...
Avatar billede JJ77 Juniormester
14. februar 2006 - 14:32 #13
Hej igen.. jeg har nu fået lavet en lidt mere simpel udgave.. og den virker da også, men hvorfor virker alt det andet javascript ikke mere efter jeg har sat det ind.. hmmm.. kan du/i se hvad som er galt?

<SCRIPT LANGUAGE="JavaScript">
function add_kategori(valg)
{
  kategori = document.form.kategori;
   
  for(i=0; i < kategori.length; i++)
  {
    kategori.options[i] = null;
  }

  switch(valg)
  {
    case 1:
      kategori.options[0] = new Option('kategori 1.1','1.1');
      kategori.options[1] = new Option('kategori 1.2','1.2');
      kategori.options[2] = new Option('kategori 1.3','1.3');
    break;
       
    case 2:
      kategori.options[0] = new Option('kategori 2.1','2.1');
      kategori.options[1] = new Option('kategori 2.2','2.2');
      kategori.options[2] = new Option('kategori 2.3','2.3');
    break;
  }
}
</script>

<script type="text/JavaScript" src="dk_pns.js"></script>
<script type="text/JavaScript">

function validering(f){
  if( f.gruppe.value==''){
      alert("Der skal vælges en gruppe!");
      f.gruppe.focus(); 
      return false;
  } 
  if( f.kategori.value==''){
      alert("Der skal vælges en kategori!");
      f.kategori.focus();   
      return false;
  }
  if( f.produkt.value==''){
      alert("Produkt skal udfyldes!");
      f.produkt.focus(); 
      return false;
  }
  if( f.pris.value==''){
      alert("Pris skal udfyldes!");
      f.pris.focus();
      return false;
  }
  if(form.email.value == '' && form.tlf1.value == ''){
      alert("Telefonnr. 1 eller e-mail skal udfyldes!");
      f.tlf1.focus();
      return false;
  }
  if( f.postNr.value==''){
      alert("Postnr. skal udfyldes!");
      f.postNr.focus();
      return false;
  }
  if( !pn["p"+f.postNr.value] ){
      alert("Postnr. synes ikke at eksistere!");
    f.postNr.focus();
    return false;
  }
  if(f.checkbox.checked==false){
      alert("Jeg har læst og forstået vedtægter for annoncering, skal afkrydses!");
      f.checkbox.focus();
      return false;
  }
  var elm = f.elements["imagefile[1]"];
if(!elm.value.toLowerCase().match(/\.jpe?g$|^$/)){
      alert("Du kan kun uploade billeder af typen jpg eller jpeg.\nLæs evt. under hjælp nederst !");
      elm.focus();
      form.mySubmit.disabled = false;
      return false;
}
elm = f.elements["imagefile[2]"];
if(!elm.value.toLowerCase().match(/\.jpe?g$|^$/)){
      alert("Du kan kun uploade billeder af typen jpg eller jpeg.\nLæs evt. under hjælp nederst !");
      elm.focus();
      form.mySubmit.disabled = false;
      return false;
}
elm = f.elements["imagefile[3]"];
if(!elm.value.toLowerCase().match(/\.jpe?g$|^$/)){
      alert("Du kan kun uploade billeder af typen jpg eller jpeg.\nLæs evt. under hjælp nederst !");
      elm.focus();
      form.mySubmit.disabled = false;
      return false;
}
  f.mySubmit.disabled = true;
  return true; 
}
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
Avatar billede JJ77 Juniormester
14. februar 2006 - 16:24 #14
har fundet ud af det.. Der var sat en <form> om selectboksene, og det måtter der tilsyneladende ikke.. for det virker efter jeg har fjernet det:)

<td>
                                        <select name="gruppe" onchange="add_kategori(this.selectedIndex);">
                                          <option>Vælg produktgruppe</option>
                                          <option value="1">gruppe 1</option>
                                          <option value="2">gruppe 2</option>
                                        </select><br>


<font color="#ee0000">*</font></td>
                            </tr>
                            <tr>
                                <td width="200"><span class="lille">Underkategori</span></td>
                                <td><select name="kategori">
                                <option value="0"> </option>
                                    </select>
Avatar billede ldanielsen Nybegynder
15. februar 2006 - 10:33 #15
I princippet skal der jo altid være en form når der er input, select og textarea elementer. Og forme må ikke være nestede, dvs. der må ikke være forme indeni forme:

FORKERT:
<form>
  bla bla
  <form>
    bla bla
  </form>
</form>
Avatar billede JJ77 Juniormester
16. februar 2006 - 11:05 #16
Ok.. det er jo egentlig meget godt at vide, for det vidste jeg ikke.. har også haft mystiske problemer før ang. forme... så det er jo nok derfor... takker:)
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