Avatar billede henninghabor Nybegynder
20. marts 2005 - 11:26 Der er 11 kommentarer og
1 løsning

valg i select skal opdatere anden select

Hej,

Jeg har 10 kategorier i en select. Baseret på hvilken af disse 10 kategorier skal de tilhørende underkategorier vises i en anden select.

Altså hvis jeg vælger option 1 i select 1 skal tilhørende 1.1, 1.2, 1.3 vises i select 2:

<select name="1">
<option>1</option>
<option>2</option>
og så videre
</select>

<select name="2">
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
<option>2.1</option>
<option>2.2</option>
<option>2.3</option>
og så videre
</select>
Avatar billede roenving Novice
20. marts 2005 - 11:39 #1
Jeg tror du kan bruge den, som blev lavet her: http://www.eksperten.dk/spm/601712 !-)
Avatar billede henninghabor Nybegynder
20. marts 2005 - 17:33 #2
Hej ronving,

Med udgangspunkt i det du har lavet nedenstående vil jeg hører om det er muligt at den automatisk henter modellerne ind hvis der ved page load er valgt en i den første select?

<script>
var modelNames=new Array()
modelNames["1"]=new Array("1-1","1-2","1-3")
modelNames["2"]=new Array("2-1","2-2","2-3")
function fillModel(opt){
  s=document.f.model.options
  s.length=modelNames[opt].length+1;
  s[0].text = "Vælg model";
  for(i=0;i<s.length-1;i++){
    s[i+1].value=modelNames[opt][i]
    s[i+1].text=modelNames[opt][i]
  }
  document.f.model.selectedIndex = 0;
  document.f.category.selectedIndex = 0;
}
</script>

<form name="f" method="get">
<select name="car" onchange="if(this.selectedIndex>0)fillModel(this.options[this.selectedIndex].value)" style="font-family: arial; font-size: 11px; width:150px;">
  <option>Vælg bil</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="model" style="font-family: arial; font-size: 11px; width:150px;">
  <option>Vælg en bil først</option>
</select>
<select name="category" style="font-family: arial; font-size: 11px; width:150px;">
  <option>Vælg</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<input type="submit" value="go">
</form>
Avatar billede roenving Novice
20. marts 2005 - 17:41 #3
Tjah, så skal vi lige lidt længere omkring, men det kan sagtens lade sig gøre:

Tilføj i script-blokken:

window.onload = function(){
  var sel = document.f.car;
  if(sel.selectedIndex>0){
    fillModel(sel.value);//også her kan du bruge sel.options[sel.selectedIndex].value, hvis du vil være _meget_ kompatibel
  }
}

-- men du kan også gøre det fra et serverside script !-)
Avatar billede henninghabor Nybegynder
20. marts 2005 - 17:47 #4
Hey roenving,

Det er serverside (php) og jeg havde overvejet at bruge en slags opdatering af hele siden hvis der blev valgt en anden kategori end den der allerede er valgt.

Men hva' synes du? Er du evt. online og har mulighed for at snakke med mig enten via msn eller icq?
Avatar billede henninghabor Nybegynder
20. marts 2005 - 17:50 #5
Points er intet problem. He he he.
Avatar billede roenving Novice
20. marts 2005 - 17:53 #6
Hvis du har en relativ simpel række muligheder, vil det være nemmest at bruge et javascript til at opdatere dine select-bokse, til gengæld skal man nøje overveje fordelen ved at gøre det på klienten, hvis det er kompliceret eller mulighederne er omfattende ...

-- men ved load er det nok meget indlysende at sætte en sekundær select via et serverside opslag, da du jo alligevel kører scriptet på serveren (og alligevel har fat i det opslag, du skal bruge til at udfylde selecten, når du skal generere javascript-databasen !-)
Avatar billede henninghabor Nybegynder
20. marts 2005 - 17:58 #7
Oki,

Som du kan se nedenstående er dit script omskrevet og jeg tror det er blevet ret tidskrævende:

<script type="text/javascript">
var modelNames = new Array()
modelNames["1000"] = new Array("Alfa Romeo", "Andet", "Audi", "BMW", "Chrysler", "Citroën", "Daewoo", "DAF", "Daihatsu", "Fiat", "Ford", "Honda", "Hyundai", "Iveco", "Jaguar", "Jeep", "Kia", "Lada", "Lancia", "Landrover", "Lexus", "Man", "Mazda", "Mercedes-Benz", "MG", "Mini", "Mitsubishi", "Nissan", "Opel", "Peugoet", "Porsche", "Renault", "Rover", "Saab", "Scania", "Seat", "Setra", "Skoda", "Smart", "Subaru", "Suzuki", "Toyota", "Udstyr", "Volkswagen", "Volvo")
modelNames["1500"] = new Array("Altanen", "Andet", "Badeværelset", "Bassinet", "Beplantning", "Bryggerset", "Børneværelset", "Drivhuset", "Entreen", "Frugthaven", "Garagen", "Kontoret", "Kælderen", "Køkkenet", "Køkkenhaven", "Loftet", "Prydhaven", "Soveværelset", "Stuen", "Terrassen", "Udestuen", "Ungdomsværelset")
modelNames["2000"] = new Array("Andet", "Anlæg", "Foto", "Køkkenudstyr", "Mikroovne", "Opvaskemaskiner", "Ovne", "Radio & TV", "Radiokommunikation", "Telefoner", "Vaskemaskiner")
modelNames["2500"] = new Array("Andet", "Ferie", "Forlystelser", "Helse", "Hobby", "Internet", "Kost", "Motion", "Musik", "Seværdigheder", "Sport")
modelNames["3000"] = new Array("Administration", "Andet", "Arbejdsmarkedsudd.", "Erhvervsudd.", "Grundskolen", "Gymnasielle udd.", "Håndværk", "Jobansøgning", "Salg & Service", "Social & Sundhed", "Transport & Lager", "Videregående udd.", "Voksen udd.")
modelNames["3500"] = new Array("(D)HTML", "Andet", "Antivirus", "ASP", "ASP.NET", "BeOS", "Browsere", "BSD", "CSS", "Databaser", "E-mail", "Firewall", "Grafik", "Hardware", "HTML", "Java", "JavaScript", "Kryptering", "Linux", "MAC", "Perl/CGI", "PHP", "RedHat", "Servere", "Unix", "Visual Basic", "Windows 2000", "Windows 95", "Windows 98", "Windows ME", "Windows XP Home", "Windows XP Pro")
modelNames["4000"] = new Array("Andet", "Fisk", "Fugle", "Insekter", "Krybdyr", "Padder", "Pattedyr")
modelNames["4500"] = new Array("Andet", "Gode råd", "Højtider")
modelNames["5000"] = new Array("Andet", "Børn & unge", "Folketingsvalg", "Graviditet & fødsel", "Kommunalvalg", "Medier", "Partier", "Sex & samliv", "Sygdom & behandling")
modelNames["5500"] = new Array("Andet", "Bøger", "Fotografier", "Mad & opskrifter", "Malerier", "Musik", "Opera", "Teater", "Tegninger")
function fillModel(opt)
{
s = document.form.sid.options
s.length = modelNames[opt].length + 1;
s[0].text = "Vælg venligst";
for(i = 0; i < s.length - 1; i++)
{
s[i+1].value = modelNames[opt][i]
s[i+1].text = modelNames[opt][i]
}
document.form.sid.selectedIndex = 0;
}
window.onload = function(){
var sel = document.form.cid;
if(sel.selectedIndex>0){
fillModel(sel.value);
}
}
</script>
Avatar billede roenving Novice
20. marts 2005 - 18:06 #8
Næppe alarmerende, for jeg tror ikke du kan registrere en forskel på at scriptet findes eller ikke findes, til gengæld vil det spare en kommunikation med serveren, hver gang brugeren vælger, og kommer han til at vælge forkert, og der lige der er en klump i forbindelsen, kan det være irriterende ...

-- og selv ved en modem-forbindelse af de gammeldags, vil ovenstående ikke tage alvorlig tid at loade, mens en side-reload vil kunne være et væsentligt irritationsmoment !-)

-- eneste sted, man skulle overveje for alvor at gøre det, var, hvis man havde en ret sikker formodning om, at der var en del af ens brugere, som havde javascript slået fra, men med ovenstående udvalg synes det ikke sandsynligt !o]

-- forøvrigt har jeg også en mistanke om, at de 6-9%, tællerne rapporterer som ikke havende javascript aktiveret, i alt væsentligt er søgemaskinernes robotter !-)
Avatar billede henninghabor Nybegynder
20. marts 2005 - 18:13 #9
Ok, du skal have mange tak for hjælpen - Det er fandeme et fedt script.

Ligger du et svar, så smider jeg lige lidt points i din retning. :)
Avatar billede roenving Novice
20. marts 2005 - 18:16 #10
Velbekomme '-)
Avatar billede henninghabor Nybegynder
20. marts 2005 - 18:17 #11
Avatar billede roenving Novice
20. marts 2005 - 18:21 #12
-- tak for point ;~}
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