Her er en modificeret udgave af "Dynamisk select-boks", som gør det du vil have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Modificeret udgave af "Dynamisk select-boks",
http://www.phoenixv.dk/arkiv.html >> Formularer >> Dynamisk select-boks</title>
<script type="text/javascript">
valg = new Array("Albatros", "Anders", "And", "Asger", "Bi", "Blomst", "Benjamin", "Bølle", "Citron", "Cykel", "Flæskestej");
valg.sort(); // sætter ordene i alfabetisk rækkefølge
// Arrayen "tmpArray" forbinder teksten med værdien (value),
// da værdierne blev sorteret alfabetisk ved "valg.sort()",
// hvilket ændrer på rækkefølgen.
// Det er derfor ikke muligt bare at oprette endnu en array,
// med løbende værdien, til teksterne (eller omvendt)..
//
// Formatet på "tmpArray"-arrayen er:
//
// TEKST#VALUE
//
// TEKST: det man kan se (og vælge/søge på)
// VALUE: det man IKKE kan se (som fanges med ".value")
//
tmpArray = new Array(
"Albatros#1234",
"Anders#5678",
"And#abcd",
"Asger#efgh",
"Bi#ijkl",
"Blomst#mnop",
"Benjamin#qrst",
"Bølle#uvwx",
"Citron#yz12",
"Cykel#3456",
"Flæskestej#7890"
);
tmp = "";
txt = new Array();
for (i=0; i < valg.length; i++) // looper igennem "valg"-arrayen
{
for (j=0; j < tmpArray.length; j++) // looper igennem "tmpArray"-arrayen
{
tmp = tmpArray[j].substring(0, tmpArray[j].indexOf("#")) // smid valg over i variablen (f.eks. "Albatros")
if (tmp.toLowerCase() == valg[i].toLowerCase()) { // sammenlign valg med det før "#".. er de ens?
// Yep de er ens.. tilføj fra positionen af "#", plus 1 tegn (f.eks. "1234"), til en ny array:
txt[txt.length] = tmpArray[j].substring(tmpArray[j].indexOf("#") + 1);
}
}
}
function opdater(felt) {
selOpts = felt.form.sel.options;
selOpts.length = 0;
for (i = 0; i < valg.length; i++)
if (felt.value == "" || valg[i].toLowerCase().indexOf(felt.value.toLowerCase()) > -1)
selOpts[selOpts.length] = new Option(valg[i], txt[i]); // Jeg har ændret den ene "valg[i]" til "txt[i]"
}
</script>
</head>
<body onLoad="document.frm.sFelt.focus();">
<h2>Dynamisk select-boks</h2>
<form name="frm">
<input type="text" name="sFelt" onKeyUp="opdater(this);" style="width: 150px;" /><br />
<select multiple="multiple" size="8" name="sel" style="width: 150px;">
<script type="text/javascript">
t = ""; // BRUGES KUN TIL DEBUG!
out = "";
for (i = 0; i < valg.length; i++)
{
out = '<option value="' + txt[i] + '">' + valg[i] + '</option>'; // Jeg har ændret den ene "valg[i]" til "txt[i]"
document.write(out);
t += out + '\n'; // BRUGES KUN TIL DEBUG!
}
</script>
</select><br /><br />
<input type="submit" value="Send" />
</form>
<!-- DEBUGGING_start -->
<div id="debug">test<div>
<script type="text/JavaScript">
t = t.replace(/</gi, "<");
t = t.replace(/>/gi, ">");
t = t.replace(/\n/gi, "<br>");
document.getElementById("debug").innerHTML = "<br><hr><b>Debug</b>:<br>" + t + "<hr>";
</script>
<!-- DEBUGGING_slut -->
</body>
</html>
Original kildekode:
http://www.phoenixv.dk/arkiv.html >> Formularer >> Dynamisk select-boks
/theSurfer
