¿Puede una opción en una etiqueta de selección tener varios valores?


103

Obtuve una etiqueta de selección con algunas opciones en un formulario HTML:
(los datos se recopilarán y procesarán usando PHP)

Pruebas:

<select name="Testing">  
  <option value="1"> One  
  <option value="2"> Two  
  <option value="3"> Three
</select>

¿Es posible que una opción lleve varios valores, como cuando un usuario selecciona "Uno", entonces algunos otros valores relacionados con esta opción se escribirán en la base de datos?

¿Cómo debo diseñar la selectetiqueta para que cada una de las opciones pueda tener uno de un valor como este:

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three
</select>

1
¿Está utilizando php como script del servidor para el procesamiento
Jaison Justus

1
solo curiosidad por qué necesitas esto?
Salil

2
@Salil. Por curiosidad si es posible hacerlo
user327712

Respuestas:


153

Una forma de hacer esto, primero una matriz, segundo un objeto:

    <select name="">
        <option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
        <option value='{"foo":"bar","one":"two"}'>Option two</option>
    </select>

Editado (3 años después de responder) para poner ambos valores en formato JSON (usando JSON.stringify()) debido a una queja de que mi respuesta de prueba de concepto "podría confundir a un desarrollador novato".


9
+1 para una solución elegante. NB Si usa la opción dos, le recomiendo que use $ .parseJSON ($ (this) .val ()) en el evento de cambio para obtener un objeto javascript, asumiendo que necesita obtener cada valor por separado.
Lucas B

1
-1 porque esta respuesta induce al OP a tener un gran problema de seguridad en su código mientras evalúa la entrada. La mejor manera de evitar esto es usar JSON, como sugiere @DavidHoerster, porque la entrada se comporta mejor.
fotanus

5
@fotanus: Mi segundo ejemplo es un objeto JSON literal que no es diferente de lo que propone la otra pregunta. En cuanto a la matriz, es solo un ejemplo. Es responsabilidad del código del lado del servidor desinfectar los valores de entrada de todos modos.
Robusto

1
@Robusto el segundo ejemplo no es un JSON válido. Es, por otro lado, un rubí hash. Mi problema con tu respuesta no se trata de lo que explicas o sabes (porque creo que sabes cómo hacer que esto sea seguro), se trata de lo que omite y podría confundir a un desarrollador novato (como sucedió con un amigo mío).
fotanus

11
Buena solución, pero para que la cadena se analice en JSON, los nombres de las propiedades deben tener comillas dobles, así: value = '{"foo": "bar", "one": "two"}'
Lars-Lasse

51

De hecho, me preguntaba esto hoy, y lo logré usando la función php explode, así:

Formulario HTML (en un archivo que llamé 'doublevalue.php':

    <form name="car_form" method="post" action="doublevalue_action.php">
            <select name="car" id="car">
                    <option value="">Select Car</option>
                    <option value="BMW|Red">Red BMW</option>
                    <option value="Mercedes|Black">Black Mercedes</option>
            </select>
            <input type="submit" name="submit" id="submit" value="submit">
    </form>

Acción PHP (en un archivo que llamé doublevalue_action.php)

    <?php
            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";
    ?>

Como puede ver en la primera parte del código, estamos creando un cuadro de selección HTML estándar, con 2 opciones. Cada opción tiene 1 valor, que tiene un separador (en este caso, '|') para dividir los valores (en este caso, modelo y color).

En la página de acción, exploto los resultados en una matriz y luego llamo a cada uno. Como puede ver, los he separado y etiquetado para que pueda ver el efecto que esto está causando.

Espero que esto ayude a alguien :)


1
Encuentro este método muy simple y muy útil, pero me pregunto si este método es compatible con todos los navegadores.
Waiyl Karim

parece muy simple y eficiente. Gracias
Varun Garg

Brillante, asombroso, magnífico ... joya de clase.
user3370889

3
@WaiylKarim No hay ninguna razón por la que no debería funcionar en todos los navegadores. Los navegadores no deberían preocuparse por lo que hay en el valor ... Y si tienen problemas con algunos símbolos, no hay problema para elegir otro. Como punto o # o _ o cualquier carácter que se pueda usar como delimitador en el lado del servidor
Risinek

25

es posible tener varios valores en una opción de selección como se muestra a continuación.

<select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
</select>

puede obtener el valor seleccionado en el evento de cambio usando jquery como se muestra a continuación.

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

Puedes encontrar más detalles en este ENLACE


16

una opción es poner varios valores separados por comas

me gusta

value ="123,1234"

y en el lado del servidor separarlos


¿Cómo separarlos en el lado del servidor? (en php)
Muhammad Ashfaq

como función de explosión
Haim Evgi

12

Cuando necesito hacer esto, hago los otros valores valores de datos y luego uso js para asignarlos a una entrada oculta

<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>
//...
</select>

<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />

<script>
$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');
$('#otherValue').val(otherValue);
$('#someOtherValue').val(someOtherValue);
});
</script>

1
Esto me hizo parte del camino; además, puedo usar .data () para recuperarlos si ya tiene un elemento (en lugar de hacer una consulta de selector). por ejemplo, myElem.data ('othervalue')
jsh

2
Esto no es técnicamente lo que pide OP, pero es 100% lo que estaba tratando de lograr cuando vine a buscar aquí. +1 para el camino simple y mejor hacia lo que supongo que era el objetivo final de simplemente almacenar dos datos en una opción seleccionada.
Lima

5

Si su objetivo es escribir esta información en la base de datos, ¿por qué necesita tener un valor principal y valores 'relacionados' en el valueatributo? ¿Por qué no enviar el valor principal a la base de datos y dejar que la naturaleza relacional de la base de datos se encargue del resto?

Si necesita tener varios valores en su OPTIONs, pruebe con un delimitador que no sea muy común:

<OPTION VALUE="1|2010">One</OPTION>

...

o agregue un objeto literal (formato JSON):

<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>

...

Realmente depende de lo que intentes hacer.


4

poner valores para cada opción como

<SELECT NAME="val">
   <OPTION VALUE="1" value="1:2:3:4"> 1-4  
   <OPTION VALUE="2" value="5:6:7:8"> 5-8  
   <OPTION VALUE="3" value="9:10:11:12"> 9-12
</SELECT>

en el lado del servidor en el caso de php, use funciones como explotar [matriz] = explotar ([delímetro], [valor publicado]);

$values = explode(':',$_POST['val']

el código anterior devuelve una matriz que solo tiene los números y el ':' se elimina


4

Hice esto usando atributos de datos. Es mucho más limpio que otros métodos que intentan explotar, etc.

HTML

<select class="example">
    <option value="1" data-value="A">One</option>
    <option value="2" data-value="B">Two</option>
    <option value="3" data-value="C">Three</option>
    <option value="4" data-value="D">Four</option>
</select>

JS

$('select.example').change(function() {

    var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');

    console.log(other_val);

});

4

¿Qué pasa con los atributos de datos html? Esa es la forma más sencilla. Referencia de w3school

En tu caso

$('select').on('change', function() {
  alert('value a is:' + $("select option:selected").data('valuea') +
    '\nvalue b is:' + $("select option:selected").data('valueb')
  )
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="Testing">
  <option value="1" data-valuea="2010" data-valueb="2011"> One
    <option value="2" data-valuea="2122" data-valueb="2123"> Two
      <option value="3" data-valuea="0" data-valueb="1"> Three
</select>


1
"data-" es necesario para que esto funcione, y la segunda parte debe estar en minúsculas.
Arun Prasad ES

1

Utilice un delimitador para separar los valores.

<select name="myValues">
<option value="one|two">
</select>

<?php>
$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];
?>

1

En HTML

<SELECT NAME="Testing" id="Testing">  
  <OPTION VALUE="1,2010"> One  
  <OPTION VALUE="2,2122"> Two  
  <OPTION VALUE="3,0"> Three
</SELECT>

Para JS

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

O PARA PHP

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010

0

No se permiten parámetros de etiqueta duplicados en HTML. Lo que podrías hacer es VALUE="1,2010". Pero tendría que analizar el valor en el servidor.


0

En lugar de almacenar las opciones en el lado del cliente, otra forma de hacerlo es almacenar las opciones como elementos de submatriz de una matriz asociativa / indexada en el lado del servidor. Los valores de la etiqueta de selección solo contendrían las claves utilizadas para eliminar la referencia de la submatriz.

Aquí hay un código de ejemplo. Esto está escrito en PHP ya que el OP mencionó PHP, pero se puede adaptar a cualquier lenguaje del lado del servidor que esté utilizando:

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

PHP:

<?php
$options = array(
    1 => array('value1' => '1', 'value2' => '2010'),
    2 => array('value1' => '2', 'value2' => '2122'),
    3 => array('value1' => '3', 'value2' => '0'),
);
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';

0

Esto puede ser útil o no para otros, pero para mi caso de uso particular, solo quería que se devolvieran parámetros adicionales desde el formulario cuando se seleccionó la opción; estos parámetros tenían los mismos valores para todas las opciones, así que ... mi solución era incluir entradas ocultas en el formulario con la selección, como:

<FORM action="" method="POST">
    <INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
    <INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

Quizás obvio ... más obvio después de verlo.


-5

puedes usar múltiples atributos

<SELECT NAME="Testing" multiple>  
 <OPTION VALUE="1"> One  
 <OPTION VALUE="2"> Two  
 <OPTION VALUE="3"> Three


Quiere múltiples bits de información de una selección, no múltiples selecciones.
Barmar
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.