Un'opzione in un tag Select può contenere più valori?


104

Ho un tag di selezione con alcune opzioni in un modulo HTML:
(i dati verranno raccolti ed elaborati utilizzando PHP)

test:

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

È possibile che un'opzione porti più valori come quando un utente seleziona "Uno", allora alcuni altri valori relativi a questa opzione verranno scritti nel database.

Come devo progettare il selecttag in modo che ciascuna delle opzioni possa portare uno di un valore come questo:

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

1
stai usando php come script del server per l'elaborazione
Jaison Justus

1
solo curioso perché ne hai bisogno?
Salil

2
@Salil. Per curiosità se è possibile farlo
user327712

Risposte:


153

Un modo per farlo, prima un array, secondo un oggetto:

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

Modificato (3 anni dopo la risposta) per inserire entrambi i valori in formato JSON (utilizzando JSON.stringify()) a causa di un reclamo secondo cui la mia risposta proof-of-concept "potrebbe confondere uno sviluppatore principiante".


9
+1 per soluzione elegante. NB Se usi l'opzione due, allora ti consiglio di usare $ .parseJSON ($ (this) .val ()) nell'evento change per ottenere un oggetto javascript, assumendo che tu debba ottenere separatamente ogni valore.
Lucas B

1
-1 perché questa risposta induce l'OP ad avere un grosso problema di sicurezza nel suo codice durante la valutazione dell'input. Il modo migliore per evitarlo è usare JSON, come suggerito da @DavidHoerster, perché l'input si comporta meglio.
fotanus

5
@ fotanus: il mio secondo esempio è un oggetto letterale JSON non diverso da quello che propone l'altra domanda. Per quanto riguarda l'array, è solo un esempio. È comunque responsabilità del codice lato server disinfettare i valori di input.
Robusto

1
@Robusto il secondo esempio non è un JSON valido. È, d'altra parte, un hash di rubino. Il mio problema con la tua risposta non riguarda ciò che spieghi o sai (perché credo che tu sappia come renderlo sicuro), riguarda ciò che omette e potrebbe confondere uno sviluppatore principiante (come ha fatto con un mio amico).
fotanus

11
Buona soluzione, ma affinché la stringa venga analizzata in JSON, i nomi delle proprietà devono avere virgolette doppie, in questo modo: value = '{"foo": "bar", "one": "two"}'
Lars-Lasse

52

In realtà me lo stavo chiedendo oggi, e l'ho ottenuto usando la funzione di esplosione php, in questo modo:

Modulo HTML (in un file che ho chiamato '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>

Azione PHP (in un file che ho chiamato doublevalue_action.php)

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

Come puoi vedere nella prima parte di codice, stiamo creando una casella di selezione HTML standard, con 2 opzioni. Ogni opzione ha 1 valore, che ha un separatore (in questo caso, "|") per dividere i valori (in questo caso, modello e colore).

Nella pagina delle azioni, esplodo i risultati in un array, quindi li chiamo ciascuno. Come puoi vedere, li ho separati ed etichettati in modo da poter vedere l'effetto che sta causando.

Spero che questo aiuti qualcuno :)


1
Trovo questo metodo molto semplice e molto utile, ma mi chiedo questo metodo sia supportato da tutti i browser?
Waiyl Karim

sembra molto semplice ed efficiente. Grazie
Varun Garg

Brillante, incredibile, superbo .. gioiello di classe.
user3370889

3
@WaiylKarim Nessun motivo per cui non dovrebbe funzionare con tutti i browser. I browser non dovrebbero preoccuparsi di cosa c'è nel valore .. E se hanno problemi con alcuni simboli in esso, non c'è problema a sceglierne un altro. Come punto o # o _ o qualsiasi carattere che può essere utilizzato come delimitatore sul lato server
Risinek

soluzione migliore per me
fizzi

25

è possibile avere più valori in un'opzione di selezione come mostrato di seguito.

<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>

puoi ottenere il valore selezionato sull'evento di modifica utilizzando jquery come mostrato di seguito.

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

Puoi trovare maggiori dettagli in questo LINK


16

un'opzione è inserire più valori con virgole separate

piace

value ="123,1234"

e nel lato server separarli


come separarli nel lato server? (in php)
Muhammad Ashfaq

come la funzione di esplosione
Haim Evgi

12

Quando ho bisogno di farlo, creo gli altri valori valori-dati e quindi uso js per assegnarli a un input nascosto

<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
Questo mi ha aiutato a fare una parte - inoltre, puoi usare .data () per rimuoverli se hai già un elemento (rispetto a una query di selezione). es. myElem.data ('othervalue')
jsh

2
Questo non è tecnicamente ciò che chiede OP, ma è al 100% ciò che stavo cercando di ottenere quando sono arrivato a cercare qui. +1 per il percorso più semplice e migliore per quello che presumo fosse l'obiettivo finale di memorizzare semplicemente due pezzi di dati in un'opzione di selezione.
Lime

5

Se l'obiettivo è scrivere queste informazioni nel database, perché è necessario disporre di un valore primario e di valori "correlati" valuenell'attributo? Perché non inviare semplicemente il valore primario al database e lasciare che la natura relazionale del database si occupi del resto.

Se devi avere più valori nei tuoi messaggi di posta OPTIONelettronica, prova un delimitatore non molto comune:

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

...

o aggiungi un oggetto letterale (formato JSON):

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

...

Dipende davvero da cosa stai cercando di fare.


4

inserire valori per ciascuna opzione come

<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>

sul lato server in caso di php, usa funzioni come explode [array] = explode ([delimeter], [posted value]);

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

il codice precedente restituisce un array con solo i numeri e ":" viene rimosso


4

L'ho fatto utilizzando gli attributi dei dati. È molto più pulito di altri metodi che tentano di esplodere ecc.

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

E gli attributi dei dati HTML? È il modo più semplice. Riferimento da w3school

Nel tuo 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-" è necessario perché funzioni, e la seconda parte deve essere minuscola.
Arun Prasad ES

1

Utilizza un delimitatore per separare i valori.

<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

In HTML

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

Per JS

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

O PER PHP

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

0

I parametri di tag duplicati non sono consentiti in HTML. Quello che potresti fare, è VALUE="1,2010". Ma dovresti analizzare il valore sul server.


0

Invece di memorizzare le opzioni sul lato client, un altro modo per farlo è memorizzare le opzioni come elementi di sotto-array di un array associativo / indicizzato sul lato server. I valori del tag select conterrebbero quindi solo le chiavi utilizzate per dereferenziare il sotto-array.

Ecco un codice di esempio. Questo è scritto in PHP poiché l'OP ha menzionato PHP, ma può essere adattato a qualsiasi linguaggio lato server che stai utilizzando:

<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

Questo può o non può essere utile per gli altri, ma per il mio caso d'uso particolare volevo solo che i parametri aggiuntivi venissero restituiti dal modulo quando l'opzione è stata selezionata: questi parametri avevano gli stessi valori per tutte le opzioni, quindi ... la mia soluzione era di includere input nascosti nel modulo con la selezione, come:

<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>

Forse ovvio ... più ovvio dopo averlo visto.


-5

puoi utilizzare più attributi

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


Vuole più bit di informazioni da una selezione, non più selezioni.
Barmar
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.