¿Es posible escribir un menú <select> y usarlo en varios lugares de la página web?

Ejemplo:

<select id="dm">
  <option value="">Select Quantity</option>
  <option value="less ">50 - 60</option>
  <option value="medium ">61 - 70</option>
  <option value="large ">71 - 80</option>
  <option value="xl ">Above 80</option>
</select>

¿Cómo puedo usar este menú varias veces dentro de la misma página web?

3
Nelie 4 sep. 2014 a las 14:04

3 respuestas

La mejor respuesta

Mantenga el original en un bloque de script ficticio como plantilla (el texto / plantilla no se reconoce, por lo que se ignora).

<script id="dm" type="text/template">
    <select>
       <option value="">Select Quantity</option>
       <option value="less ">50 - 60</option>
       <option value="medium ">61 - 70</option>
       <option value="large ">71 - 80</option>
       <option value="xl ">Above 80</option>
    </select>
</script>

Crea copias usando:

var copy = $('#dm').html();
something.append(copy);

Esto evita el problema de identificación única (ya que la selección no tiene identificación). También es muy fácil de leer / mantener.

Como se sugiere a continuación, si desea utilizar esto en un formulario, la selección debe nombrarse:

var $copy = $($('#dm').html()).attr('name', newMenuName);
something.append(copy);

nota: el $ () adicional convierte la cadena en un elemento DOM primero antes de agregar el atributo.

2
Gone Coding 4 sep. 2014 a las 10:16

Usar un motor de plantillas como Manillar o similar sería fácil, pero podría ser excesivo en su caso.

Simplemente almacenaría el código HTML completo en una variable, y luego inyectaría esa variable donde la necesite para uso futuro. El problema aquí es la complejidad y facilidad de mantenimiento del código HTML. En cualquier caso, algo como esto (usando jQuery):

Js:

var myDropDown = 'youthtmlcode is here'

$("#myDropDown").html(myDropDown);

Html:

<div id="myDropDown"></div>
0
LinkinTED 4 sep. 2014 a las 10:12

Dale una clase al <select> y luego puedes usar la función jQuery clone().

<select class="dropClass" id="dm">
  <option value="">Select Quantity</option>
  <option value="less ">50 - 60</option>
  <option value="medium ">61 - 70</option>
  <option value="large ">71 - 80</option>
  <option value="xl ">Above 80</option>
</select>

<div id="someDiv"><!-- you want the dropdown here too --></div>
$( ".dropClass" ).clone().appendTo( "#someDiv" );

Demo

2
LinkinTED 4 sep. 2014 a las 10:09