webForumDet fria alternativet

Dropdown meny med knapp

5 svar · 1 397 visningar · startad av Storyteller

StorytellerMedlem sedan jan. 20107 inlägg
#1

Hej

Jag läser en grundkurs i kodning och ska göra en sida där man via en
dropdown meny (med knapp) ska kunna välja en ort man villse vädret på.
Jag har listan och knappen klar. Jag har även skaffat divar till vädret för tre städer via klart.se. Om man lägger in dessa divar i koden får man en ruta för varje stad där det står temp osv. genom att trycka på rutan länkas man vidare till hemsidan. Jag har lagt dessa rutor som osynliga då de inte ska synas förrän jag valt dem i menyn och tryckt på knappen... Härifrån står det still. Jag har försökt på alla möjliga sätt (som en nybörjare kan komma på) att ordna detta.
Är det någon som har gjort ngt liknande som har förslag på kod (och även kan förklara den för mig..)

såhär ser min meny ut:

<form action="*">
<select name="list">
<option selected value="valj">Välj ort</option>
<option value="texttext.html">Karlskrona</option>
<option value="http://hem.passagen.se/atiger/">Varberg</option>
<option value="htmltext.html">Säffle</option>
</select>
<input type=button value="Kolla väder" onclick=Vet inte vad jag ska skriva här>
</form>

Mvh S

voigtann1Medlem sedan juni 20018 810 inlägg
#2

Välkommen till wF!

Är inte direkt svårt, gå att googla på detta:

<form action="#">
	<select name="list">
		<option selected value="valj">Välj ort</option>
		<option value="texttext.html">Karlskrona</option>
		<option value="http://hem.passagen.se/atiger/">Varberg</option>
		<option value="htmltext.html">Säffle</option>
	</select>
	<input type=button value="Kolla väder" onclick="GoSeeTheWorld(this)">
</form>

<script type="text/javascript">
function GoSeeTheWorld(el) {
	var selectBox = el.form.list; //Get the dropdownlist from the form
	var selectedOption = selectBox.options[selectBox.selectedIndex];
	if(selectBox.selectedIndex>0) {
		document.location.href = selectedOption.value; //browse to the selected value
	}
}
</script>

Är ett exempel på hur du löser det.

Ett tips är att använda [kod] eller [highlight=xxx]där xxx är vilket språk du använder (html, javascript osv)

vad du gör när du kör onclick så anropar du en funktion (i detta fall GoSeeTheWorld()) där den har elementet som du tryckte på som en parameter, där vi hämtar ut formuläret med ett element med ett namn på "list", hämtar ut värdet på den och skicka dig vidare till den address om du har ett index som är > 0 (dvs du skall inte gå till någon sida om du har valt "välj ort" i ditt fall.

jawbreakerMedlem sedan jan. 2003294 inlägg
#3

Frågan är om det är detta han (eller hon) vill göra, voigtann1. Man blir lite lurad av urlarna i listan tror jag, för som jag fattar det finns det redan tre dolda divar med väderinformation och när man väljer en stad i listan ska man visa den dolda div som motsvarar denna stad. Eller, Storyteller?

Det är iofs inte speciellt mycket att ändra i koden som redan postats om det är ovanstående som ska göras, men i alla fall :)

StorytellerMedlem sedan jan. 20107 inlägg
#4

Hej igen

Tack för de snabba svaren. Tyvärr funkade det inte, vilket nog är mitt fel. Jag såg att jag tyvärr skickat fel kod... De adresser som står efter option value ska inte alls vara där, utan det är ju mina divar jag vill få in på ngt sätt. Men bortsett från adresserna stämde koden.
Men som sagt, jättetack!!! (deadlinen är över men om ngn på rak arm kan säga vad jag gör fel så vore det roligt att lära sig....)

ps. Det är "hon" :)

voigtann1Medlem sedan juni 20018 810 inlägg
#5

då får jag nog be att du kommer det den kod du faktiskt kör/vill få igång för jag kan inte gissa ens vad du försöker få igång.

StorytellerMedlem sedan jan. 20107 inlägg
#6

Hej igen

Det var ett tag sedan du bad mig utveckla min fråga och jag ber om ursäkt över att bara "ploppa upp" en månad senare.
Det jag vill göra är att skapa en dropdown meny med en knapp. I menyn ska man kunna välja en stad och då man trycker på knappen så ska denna dolda div ploppa upp på sidan

<div id="c_24513195be4ad1fd59cf24175d59a1a3" class="normal"><h2 style="color: #000000; margin: 0 0 3px; padding: 2px; font: bold 13px/1.2 Verdana; text-align: center;">Vädret Karlskrona</h2></div><script type="text/javascript" src="http://www.klart.se/widget/widget_loader/24513195be4ad1fd59cf24175d59a1a3"></script>

Hur kopplar jag denna div till knappen? Jag är verkligen dålig på sånt här och vill verkligen lära mig så det är jätteschysst om du/ni har tid!

Mvh S

124 ms totalt · 3 externa anrop · cache AV · v20260731051352-full.56cc9887
0 ms — hämta statistik (cache)
0 ms — hämta forumlista (cache)
121 ms — hämta tråd, inlägg och bilagor (db)