Archive for javascript

Seleccionar en una llista desplegable mentre s’escriu, en Explorer < 7

Febrer 6, 2008 at 5:40 pm · Filed under html, javascript

Un exemple de com fer que Explorer versió anterior a la 7 (perquè la 7 ja ho fa) puga seleccionar un element d’una llista desplegable mentre s’escriu.


<html>
 <head>
  <script type="text/javascript">

   var fnd = "";
   var aux = -1;
   var saltaonchange = ’s’;

   function salta() {
    if (saltaonchange == ’s’) {
     alert(’hh’);
    }
   }   
  </script>

  <!–[if lt IE 7]>
  <script type="text/javascript">

   window.onload = function () {

    document.getElementById("desplegable").onblur = function() {
     var sel = this;

     if (aux != -1 && sel.selectedIndex != aux) {
      salta();
      aux = ”; 
     }
    } 

    document.getElementById("desplegable").onkeypress = function() {
     var k;
     var sel = this;

     k = String.fromCharCode(event.keyCode);

     if (k < " " || k > "~") return true;
     if (k == " ") fnd = "";
       else fnd += k.toUpperCase();
     for (var i=0; i<sel.options.length; i++) {

      if (fnd == sel.options[i].text.toUpperCase().substring(0,fnd.length)) {
       if (aux == -1) aux = sel.selectedIndex;
       sel.options.selectedIndex = 1;
       saltaonchange = ‘n’;
       return false;
       }
      }
     }
    }

 </script>
 <![endif]–>  

<html>

 </head>
 <body>
   <select id="desplegable" onchange="salta();" onfocus="fnd=”; aux=-1; saltaonchange=’s’">
   <option></option>
   <option>aaa</option>
   <option>bab</option>
   <option>bac</option>
   <option>cba</option>
   <option>cbb</option>
   <option>xbc</option>
   </select>
 </body>
</html>

salut.




Comentaris

Problema amb el innerHTML d’una ’select’… en explorer

Juliol 30, 2007 at 12:07 pm · Filed under html, javascript

Amb el explorer no pots utilitzar el innerHTML per a canviar les opciones d’una llista d’HTML, amb el Firefox sí. La solució que es proposa des de Microsoft és utilitzar un DIV que envolte a la llista, i utilitzar innerHTML des del DIV.

http://support.microsoft.com/kb/276228/es

Comentaris

Algunes formes de crear Llistes desplegables amb javascript

Juliol 26, 2007 at 1:48 pm · Filed under html, javascript

Hi ha més maneres, però ens centrarem en la forma de crear-les insertant opció per opció, i no tot a la vegada, com podríem fer amb innerHTML o creant un Array.

La manera clásica, al menys per a mi, és creant objectes:

myList = document.forms['formular'].elements['box'];

optionNew = new Option(1,1);
optionNew2 = new Option(2,2);
optionNew3 = new Option(3,3);

myList.options[0] = optionNew;
myList.options[1] = optionNew2;
myList.options[2] = optionNew2;

Aquesta és compatible, al menys, amb Explorer i Firefox. També podríem utilitzar appendChild, però timdrem un problema de compatibilitat amb Explorer. El codi deuria de ser així:

optionNew = new Option(1,1);
optionNew2 = new Option(2,2);
optionNew3 = new Option(3,3);

myList.appendChild(optionNew);
myList.appendChild(optionNew2);
myList.appendChild(optionNew3);

Perquè ens funcione també amb Explorer, hauríem de crear elements en el DOM:

optionNew = document.createElement('option');
optionNew2 = document.createElement('option');
optionNew3 = document.createElement('option');
optionNew.value = 1;
optionNew2.value = 2;
optionNew3.value = 3;
optionNew.innerHTML = '1';
optionNew2.innerHTML = '2';
optionNew3.innerHTML = '3';

myList.appendChild(optionNew);
myList.appendChild(optionNew2);
myList.appendChild(optionNew3);

Ara ens quedaria veure la forma d’afegir algun que altre optGroup. Per exemple:

var optgroup = document.createElement('optgroup');
optgroup.label = "Prueba1";

var optgroup2 = document.createElement('optgroup');
optgroup2.label = "Prueba2";

optionNew = document.createElement('option');
optionNew2 = document.createElement('option');
optionNew3 = document.createElement('option');
optionNew.value = 1;
optionNew2.value = 2;
optionNew3.value = 3;
optionNew.innerHTML = '1';
optionNew2.innerHTML = '2';
optionNew3.innerHTML = '3';

optgroup.appendChild(optionNew);
optgroup2.appendChild(optionNew2);
optgroup2.appendChild(optionNew3);

myList.appendChild(optgroup);
myList.appendChild(optgroup2);

Podem fer més accions sobre les opcions, però ja ho veurem més endavant…

Comentaris