fylla select med javascript
Jag har en select som jag vill fylla med olika innehåll beroende på användarens val i radioknappar.
Har skapar en array med de värden som ska läsas in:
var arrOption = new Array();
arrOption [0] = new Array();
arrOption [0][0] = new Option("- Välj -","0");
arrOption [0][1] = new Option("Kalle","1");
arrOption [0][2] = new Option("Sven","2");
arrOption [1] = new Array();
arrOption [1][0] = new Option("- Välj -","0");
arrOption [1][1] = new Option("Anna","1");
arrOption [1][2] = new Option("Lena","2");
Gjorde sen en function för att läsa in till select boxen:
function reloadOption(valIndex)
// skicka med index för att avgöra vilken dimension av arrayen som ska fylla select boxen
{
// peka på sel_namn options arrayen (för att göra koden mer lättläst)
var arrNamn= document.form.sel_namn.options;
arrNamn.length = 0; // rensa befintliga options
// ladda nya options för den radio är vald (pojkar eller flickor)
for(var i=0; i<arrOption[valIndex].length; i++)
{
arrNamn.length++; // lägg till en ny option
arrNamn[arrNamn.length-1].text = arrOption[valIndex][i].text;
arrNamn[arrNamn.length-1].value = arrOption[valIndex][i].value;
}
return;
}
Formuläret har sen radio som anropar onchange:
<input type="radio" name="namn" value="pojkar" onchange="reloadOption(0)" /> Pojkar
<input type="radio" name="namn" value="flickor" onchange="reloadOption(1)" /> Flickor
Så långt fungerar allt MEN... om jag har flickor valda och har klickat fram tex Anna i selecten så rensas inte detta om jag byter radio till Pojkar förrän jag klickar på selecten en gång.
Hur gör jag för att uppdatera selecten till att stå på "Välj" när jag klickar på någon av radioknapparna?
Svara
Sv: fylla select med javascript
Det beror på att du använder onchange...
Vad som händer är att du måste släppa focus från radio knappen för att den ska uppdatera.
Om du kör en kontroll på värdet som kommer in i funktionen som du aktiverar genom onClick tex så kan du se om du ska genomföra en förändring av värdena i selecten eller inte.
Svara
Sv: fylla select med javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script>
var arrOption = new Array();
var curr_choice = -1;
arrOption [0] = new Array();
arrOption [0][0] = new Option("- Välj -","0");
arrOption [0][1] = new Option("Kalle","1");
arrOption [0][2] = new Option("Sven","2");
arrOption [1] = new Array();
arrOption [1][0] = new Option("- Välj -","0");
arrOption [1][1] = new Option("Anna","1");
arrOption [1][2] = new Option("Lena","2");
function reloadOption(valIndex)
// skicka med index för att avgöra vilken dimension av arrayen som ska fylla select boxen
{
// peka på sel_namn options arrayen (för att göra koden mer lättläst)
if(curr_choice != valIndex){
curr_choice = valIndex;
var arrNamn= document.form.sel_namn.options;
arrNamn.length = null; // rensa befintliga options
// ladda nya options för den radio är vald (pojkar eller flickor)
for(var i=0; i<arrOption[valIndex].length; i++)
{
arrNamn.length++; // lägg till en ny option
arrNamn[arrNamn.length-1].text = arrOption[valIndex][i].text;
arrNamn[arrNamn.length-1].value = arrOption[valIndex][i].value;
}
return;
}
}
</script>
<BODY>
<form name="form">
<input type="radio" name="namn" value="pojkar" onClick="reloadOption(0)" /> Pojkar
<input type="radio" name="namn" value="flickor" onClick="reloadOption(1)" /> Flickor
<select name="sel_namn">
<option value=""></option>
</select>
</form>
</BODY>
</HTML>
Svara
Sv: fylla select med javascript
Det hjälpte när jag bytte till onClick.
Tack snälla för hjälpen!
/Lena
Svara