Är inte så vass på javascipt så jag tänkte höra om det finns nåt färdigt jag kan utgå ifrån. Ett hett tips: Mozilla Firefox. I menyn "tools" finns alternativet "DOM Inspector", den är väldigt värdefull (eller hitta någon trevlig sida om DOM) Har varken tänkt eller testat överdrivet mycket utan skrev bara..Modifierbar listbox
Vill ha en listbox och en textruta. I textrutan ska man kunna skriva i ord som man lägger till i listboxen. Listboxen vill jag även ska gå att modifiera, att man kan ta bort poster från den och kunna flytta en post upp/ner i ordningen.Sv: Modifierbar listbox
I alla fall, på document.body finns det lite kul metoder, t.ex. .createElement();
Som du vet består ju en listbox av en select med en massa option-taggar i. Ex:
var sel = document.getElementById("id_på_min_select_tagg");
var opt;
opt = document.body.createElement("option");
sel.appendChild(opt);
För att sätta texten på opt-elementet kan du titta i DOM-inspector på en option-tagg och se vilka egenskaper som finns där. Du kan även kolla vilka metoder som finns, eller kolla på t.ex. http://developer.mozilla.org/Sv: Modifierbar listbox
Men det lilla jag testade så verkar det fungera.
<code>
<html>
<head>
<script type="text/javascript">
<!--
function addItem(){
var sel = document.getElementById("sel");
var opt = document.createElement("option");
opt.text = document.getElementById("val").value;
opt.innerHTML = document.getElementById("val").value;
sel.appendChild(opt);
}
function removeItem(){
var sel = document.getElementById("sel");
sel.remove(sel.selectedIndex);
}
function moveUp(){
var sel = document.getElementById("sel");
var selIndex = sel.selectedIndex;
if(selIndex>0)
sel.insertBefore(sel.options[selIndex],sel.options[selIndex-1]);
}
function moveDown(){
var sel = document.getElementById("sel");
var selIndex = sel.selectedIndex;
if(selIndex<sel.options.length)
sel.insertBefore(sel.options[selIndex],sel.options[selIndex+2]);
}
//-->
</script>
</head>
<body>
<form name="foo">
<input type="text" id="val">
<input type="button" onClick="addItem();" value="Add item"><br>
<input type="button" onClick="removeItem();" value="Remove selected">
<input type="button" onClick="moveUp();" value="Move up">
<input type="button" onClick="moveDown();" value="Move down"><br>
<select id="sel" size="5" style="width: 200px;"></select>
</form>
</body>
</html>
</code>