Манипулиране на списъци

15:30:19 часа на 12 март 2011 Visited: 8204, Today: 0

Във формите за диалог с потребителя на интернет страниците може да се показват два вида списъци:

• Падащи списъци Като този С друг избор Или друг ... И т.н. или
• Pазтворени списъци Като този С друг избор Или друг ... И т.н.

Html кодът, за тези списъци е:

<select id="FirstComboBox">
<option>Като този</option>
<option>С друг избор</option>
<option>Или друг ...</option>
<option>И т.н.</option>
</select>

<select multiple="multiple" style="vertical-align:top;" id="FirstSelectList">
<option>Като този</option>
<option>С друг избор</option>
<option>Или друг ...</option>
<option>И т.н.</option>
</select>

По-интересно става ако решете да добавите бутони, които да манипулират тези списъци: да изтриват редове, да добавят редове, или да вмъкват редове на посочено място. Например:

Като този С друг избор Или друг ... И т.н.

Следва кодът, който реализира тази функционалност:

<script type="text/javascript"><!--
function deleteOption(){
var sl = document.getElementById("MySelectList");
var i = sl.selectedIndex;
if (i<0) { alert("Не сте избрали ред за изтриване."); return; }
sl.removeChild(sl.options[i]);
}
function appendOption(){
var o = document.createElement("option");
o.text = "Добавен ред";
document.getElementById("MySelectList").appendChild(o);
}
function insertOption(){
var sl = document.getElementById("MySelectList");
var i = sl.selectedIndex;
if (i<0) { alert("Не сте избрали ред, пред който да бъде вмъкнат нов ред."); return; }
var o = document.createElement("option");
o.text = "Вмъкнат ред";
var oi = sl.options[i];
try{ sl.add(o,oi); } // Понеже това не работи на IE
catch(ex){ sl.add(o,i); } // Това се изпълнява само на IE
}
--></script>
<select multiple="multiple" style="vertical-align:top;" id="MySelectList">
<option>Като този</option>
<option>С друг избор</option>
<option>Или друг ...</option>
<option>И т.н.</option>  <input type="button" value="Изтриване" onclick="deleteOption();"> 
<input type="button" value="Добавяне" onclick="appendOption();"> 
<input type="button" value="Вмъкване" onclick="insertOption();">

Прочетено от тук.