Manipolare elementi di una lista

**Miki73** · 04-08-2007, 10:03

Premetto che da poco sto avendo a che fare con javascript...
Ho una lista di questo tipo:

codice:

<ul id="mesi">[*]gennaio[*]febbraio[*]marzo[*]aprile[*]maggio[*]giugno[*]luglio[*]agosto[*]settembre[*]ottobre[*]novembre[*]dicembre[/list]

per accedervi basta...

codice:

var alloptions = document.getElementsByTagName("li");

mi stavo chiedendo se è possibile in qualche modo accedere al testo all'interno dei tag LI e se era possibile rimuovere un elemento della lista...
grazie

**d.biancardi** · 04-08-2007, 10:23

Facendo var alloptions = document.getElementsByTagName("li"); il rischio è quello di prendere tutti gli elementi LI di tutta la pagina. Conviene utilizzare l'ID del UL ossia "MESI".

Ho realizzato una lista LILO (last input last output) ma guarda il codice e la puoi modificare a tuo piacimento

codice:

<ul id="mesi">[*]gennaio[*]febbraio[*]marzo[*]aprile[*]maggio[*]giugno[*]luglio[*]agosto[*]settembre[*]ottobre[*]novembre[*]dicembre[/list]
<input type='text' id='node_text'>
Last Input
Last Output

<script type='text/javascript'>



function last_input(){
	var LILO = document.getElementById("mesi");
	child = document.createElement("li");
	child.innerHTML = document.getElementById("node_text").value;
	LILO.appendChild(child);
}

function last_output(){
	var LILO = document.getElementById("mesi");
	var last = LILO.lastChild;
	LILO.removeChild(last);
		
}

</script>

</body>

**Miki73** · 04-08-2007, 15:40

grazie per il suggerimento, comunque ho trovato la soluzione al mio problema, che era quello di creare una ComboBox:

codice:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/
form { position: relative; }
input { position: absolute; top: 0px; left: 0px; }
img { position: absolute; top: 0px; left: 145px; }
ul {
  position: absolute; top: 21px; left: 0px;
  width: 164px;
  display: none;
  list-style-type: none;
  margin: 0;
  border: 1px solid #000;
  border-color: #b2b2b2 #000 #000 #b2b2b2;
  padding: 0px;
}
li { font-family: Arial, sans-serif; font-size: 10pt; padding: 0 3px; }
li:hover { background-color: #316ac5; color: #fff; }
/*]]>*/
</style>
<script type="text/javascript">
<!--
var lista = "mesi";
var textbox = "mese";
function GetFocus() {
  try {
    document.getElementById(lista).style.display="block";
    document.getElementById("mesi").style.display="block";
  } catch(e) {
    alert(e)
  }
}
function Change(elem) {
  var i,len = elem.length;
  var alloptions = document.getElementById("mesi").getElementsByTagName("li");
  var number = alloptions.length;
  for (i=0; i<number; i++)
    if (alloptions[i].firstChild.nodeValue.substring(0,len)!=elem)
      alloptions[i].style.display='none';
    else
      alloptions[i].style.display='block';
}
function Selected(scelta) {
  try {
    document.getElementById(textbox).value=scelta;
    document.getElementById("mesi").style.display="none";
  } catch(e) {
    alert(e)
  }
}
-->
</script>
</head>
<body>
  <form>
    <input type="text" id="mese" value="" onkeyup="Change(this.value); GetFocus();" />
    [img]frecciagiu.gif[/img]
    <ul id="mesi">
      <li onclick="Selected('gennaio')">gennaio
      <li onclick="Selected('febbraio')">febbraio
      <li onclick="Selected('marzo')">marzo
      <li onclick="Selected('aprile')">aprile
      <li onclick="Selected('maggio')">maggio
      <li onclick="Selected('giugno')">giugno
      <li onclick="Selected('luglio')">luglio
      <li onclick="Selected('agosto')">agosto
      <li onclick="Selected('settembre')">settembre
      <li onclick="Selected('ottobre')">ottobre
      <li onclick="Selected('novembre')">novembre
      <li onclick="Selected('dicembre')">dicembre[/list]
  </form>
</body>
</html>

Discussione: Manipolare elementi di una lista

Strumenti discussione

Ricerca discussione

Visualizza

Manipolare elementi di una lista

Permessi di invio