Combobox con javascript

ghost_darknet · #1 (**permalink**) 03/05/2013, 06:25

Hola como estan... Tengo unas dudas al crear en java un combobox, me eh cabezeado pero aun no me funciona. Si em pueden hechar una mano con este tema

Coloco el codigo en HTLM

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plataforma Control </title>
 
<script src="agregar.js" language="JavaScript"> </script>
<link href="../estilos/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor-principal">
 
<h1 class="titulo-mostrar">Plataforma de Control</h1>
 
<h3 class="titulo">Modulo de Asignacion de Hardware</h3>
 
<h5 class="caja-izquierda"><a href="#">Volver</a><span class="forma">
</span></h5>
<hr />
<br />
 
<h5 class="titulo">Ingrese los datos</h5>
 
<form method="post" action="algo.php">
<div id="centra-tabla">
<table class="tabla">
<p>Agrege los datos haciendo click en "Agregar Hardware".</p>
<tr> 
<th><fieldset id="fiel"><input type="button" value="Agregar Hardware" onclick="crear(this)" /></fieldset></th>
</tr>
</table>
<br />
<hr />
<h5 class="titulo">Si desea Desasignar un Equipo haga click en Desasignacion de </h5>
 
<fieldset id="desasignacion"><input type="button" value="Desasignar Hardware" onclick="desasigna(this)" /></fieldset></th>
 
<table class="tabla">
<tr> <th> <input type="submit" name="submit_asignacion" id="submit_asignacion" value="Asignar Hardware" /> </th></tr>
 
</div>
</form>
 
</div>
</body>
</html>

Y este el la funcion Javascript que llama

Código Javascript:

Ver originalnum=0;
 
function crear(obj) {
  num++;
  fi = document.getElementById('fiel'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num; // 3
  fi.appendChild(contenedor); // 4
 
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'serie'+num; // 6
  ele.autocomplete = 'off'; // 6
  ele.placeholder = 'Serie del Equipo'; // 6
  ele.size = '25';
  ele.required = 'required';
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'ticket'+num; // 6
  ele.autocomplete = 'off'; // 6
  ele.placeholder = 'N° Ticket'; // 6
  ele.size = '18';
  ele.required = 'required';
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = 'Borrar'; // 8
  ele.name = 'div'+num; // 8
  ele.onclick = function () {borrar(this.name)} // 9
  contenedor.appendChild(ele); // 7
}
function borrar(obj) {
  fi = document.getElementById('fiel'); // 1 
  fi.removeChild(document.getElementById(obj)); // 10
}
//////////////////////////////////////////////////////////////////
//desasignar
num1=0;
function desasigna(obj) {
  num++;
  fi = document.getElementById('desasignacion'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num1; // 3
  fi.appendChild(contenedor);
  
  ele = document.createElement('select');
  ele.name = 'tipo'+num1;
  opt = document.createElement('option');
  ele.options.value = 'tipos';
  ele.appendChild(opt);
  contenedor.appendChild(ele);
 
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'des_serie'+num1; // 6
  ele.autocomplete = 'off'; // 6
  ele.placeholder = 'Serie del Equipo'; // 6
  ele.size = '25';
  ele.required = 'required';
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'des_rotulo'+num1;
  ele.autocomplete = 'off';
  ele.placeholder = 'Rotulo del Equipo';
  ele.size = '20';
  ele.required = 'required';
  contenedor.appendChild(ele);
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = 'Borrar'; // 8
  ele.name = 'div'+num1; // 8
  ele.onclick = function () {borraDesasignacion(this.name)} // 9
  contenedor.appendChild(ele); // 7
}
function borraDesasignacion(obj) {
  fi = document.getElementById('desasignacion'); // 1 
  fi.removeChild(document.getElementById(obj)); // 10
}

maycolalvarez · #2 (**permalink**) 03/05/2013, 07:09

algunos navegadores tienen problemas para crear selects de forma dinámica, lo mejor que puedes hacer es concatenar su estructura HTML en una cadena y vaciarlo en un contenedor (div) con innerHTML

ghost_darknet · #3 (**permalink**) 03/05/2013, 07:24

Cita:

Iniciado por maycolalvarez

algunos navegadores tienen problemas para crear selects de forma dinámica, lo mejor que puedes hacer es concatenar su estructura HTML en una cadena y vaciarlo en un contenedor (div) con innerHTML

me podrias dar un ejemplo maycolalvarez, ya que con javascript soy demasiado noob