Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Html val under dropdown

Skapad av Borttagen, 2012-07-30 15:51 i Webbutveckling & Programmering

2 637
2 inlägg
0 poäng
Robs
Visningsbild
P 33 Vällingby Hjälte 92 inlägg
2012-07-30 15:51
0
Till en början bör det tilläggas att jag är potatis gällande kodning, därför jag vänder mig hit.

Jag fipplar lite med en hemsida där jag vill ha en dropdown - så långt har jag kommit att jag får till en sådan. Men nu kommer mitt problem. När man väljer olika alternativ under dropdownen så vill jag att en text ska ändras på ett annat ställe..

Text:

<select>
<option>Alternativ 1</option>
<option>Alternativ 2</option>
<option>Alternativ 3</option>
</select>

När jag väljer Alt1 så vill jag att det ska dyka upp en text till höger som det står tex "Detta är alternativ 1", sedan när jag väljer alt2 så dyker det upp på samma ställe "Detta är alternativ 2" osv.

Ja, ni kopplar nog vad jag menar. Googlat lite osv, men samma där - jag är potatis. Någon som har någon idé?

Tack på förhand. :-)

Om jag var du i din situation så skulle jag tycka precis likadant.

Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

Diskmedel
Visningsbild
P 32 Örebro Hjälte 4 442 inlägg
2012-08-03 10:29
0

Svar till Robs [Gå till post]:
Din bästa kompis i det här fallet är Javascript, och gärna ramverket jQuery.

Jag skriver en lösning lite kortfattat och utan att själv köra koden. Har du några vidare funderingar så är det bara att fråga.

Till din hjälp så har du jQuerys change-event ( http://api.jquery.com/change/) som triggas när du ändrar alternativ, samt jQuerys text-funktion som skriver ut en text i ett element ( http://api.jquery.com/text/).

Skapa en HTML-struktur där du enkelt kan hitta select-elementet samt elementet som ska innehålla texten.

Ett stycke html-kod:

<select id="select">
    <option>Alternativ 1</option>
    <option>Alternativ 2</option>
    <option>Alternativ 3</option>
</select>

<div id="text-output"></div>


Inkludera jQuery i dokumentet och skapa en javascriptfil som kan innehålla det vi behöver för att allt ska fungera. Denna fil bör i det här fallet inkluderas i slutet av dokumentet för att all HTML-kod ska vara laddad innan scriptet körs, men väljer du att lägga den överst i dokumentet av någon anledning så får du inte glömma att "wrappa" koden med:

jQuery(document).ready(function($) {
});

Nu ska koden in för att ändra texten vid nytt val i selecten. Här letar vi först upp elementet i koden och kollar om den ändras. I så fall plockar vi helt enkelt ut denna option och skriver ut.

Ett stycke javascript-kod:


// Cahcea vår div "text-output" för ökat prestanda
var textholder = $('#text-output');

// När man ändrar event
$('input#select').on('change', function() {
    // Lagra namnet på det valda alternativet
    var optname = $(this).children(option:selected).val();

    // Skriv ut namnet för det valda alternativet i vår div "text-output"
    textholder.text('Detta är ' + optname);
});


Åter igen, har inte kört koden, men det ska fungera att göra någonting i den stilen. Skiter det sig, så fråga bara.

Partydödare på Spotify: http://open.spotify.com/user/dizkiz/playlist/2Udmokbmx9W9bRVTtS09Fz

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Html val under dropdown

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons