2012-04-13 22 views
14

Me preguntaba si había un atajo fácil de añadir opciones de un menú desplegable para los números del 1 al 100 en lugar de tener que hacer lo siguiente:¿Forma sencilla de agregar menú desplegable con 1 - 100 sin hacer 100 opciones diferentes?

<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 

etc. todo el camino hasta 100?

Gracias

Respuesta

20

No con HTML sencillo Me temo.

Se podría utilizar un poco de jQuery para hacer esto sin embargo:

$(function(){ 
    var $select = $(".1-100"); 
    for (i=1;i<=100;i++){ 
     $select.append($('<option></option>').val(i).html(i)) 
    } 
});​ 

-- SEE DEMO --

se puede descargar jQuery here

+0

que sería un gran trabajo, que el lenguaje jQuery puedo incrustar en que?

13

No con HTML puro por lo que yo sé.

Pero con JS o PHP u otro lenguaje de scripts como JSP, puede hacerlo muy fácilmente con un bucle for.

Ejemplo en PHP:

<select> 
<?php 
    for ($i=1; $i<=100; $i++) 
    { 
     ?> 
      <option value="<?php echo $i;?>"><?php echo $i;?></option> 
     <?php 
    } 
?> 
</select> 
+0

muy útil, gracias :) – GibsonFX

5

¿Está utilizando JavaScript o jQuery además del html? Si es así, se puede hacer algo como:

HTML:

<select id='some_selector'></select>​ 

jQuery:

var select = ''; 
for (i=1;i<=100;i++){ 
    select += '<option val=' + i + '>' + i + '</option>'; 
} 
$('#some_selector').html(select); 

Como se puede see here.

Otra opción para los navegadores compatibles en lugar de seleccionar, puede utilizar HTML5 es de input type=number:

<input type="number" min="1" max="100" value="1"> 
+0

muy útil, gracias :) – GibsonFX

1

Veo esto es viejo, pero ... No sé si usted está buscando para el código para generar los números/opciones cada vez que se carga o no. Pero utilizo una página excel o una página de cálculo de oficina abierta y coloco el uso de la numeración automática todo el tiempo. Puede ser así ...

| <option> | 1 | </option> |

A continuación, destaco las celdas en la fila y las arrastro hacia abajo hasta que haya 100 o el número que necesito. Ahora tengo fragmentos de código a los que me refiero.

0

Jquery de una sola línea:

ES6 + jQuery:

$('#select').append([...Array(100).keys()].map((i,j) => `<option>${i}</option >`)) 

Lodash + jQuery:

$('#select').append(_.range(100).map(function(i,j){ return $('<option>',{text:i})})) 
-2

Si es siempre 100, que mejor tipo estáticamente en el código HTML.Con la edición multilínea, o incluso el simple truco de Excel, esto no debería llevar demasiado tiempo, y no supondrá una carga para el procesador en el tiempo de ejecución, en todo momento. También se aburre, ya sabes ...

+0

Lea siempre la pregunta y comprenda primero antes de responder. De lo contrario, terminas confundiendo a algunas personas en la plataforma. – Arthur

0

Como todos han dicho, no hay ninguno en html; sin embargo, puede usar PUG/Jade. De hecho, hago esto a menudo.

Se vería algo como esto:

select 
    - var i = 1 
    while i <= 100 
    option=i++ 

Esto produciría: screenshot of htmltojade.org

Cuestiones relacionadas