Kann eine Option in einem Select-Tag mehrere Werte enthalten?

103

Ich habe ein Auswahl-Tag mit einigen Optionen in einem HTML-Formular erhalten:
(Die Daten werden mit PHP gesammelt und verarbeitet.)

Testen:

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

Ist es möglich, dass eine Option mehrere Werte enthält, z. B. wenn ein Benutzer "Eins" auswählt, werden einige andere Werte, die sich auf diese Option beziehen, in die Datenbank geschrieben.

Wie soll ich das selectTag so gestalten, dass jede der Optionen einen oder einen Wert wie diesen enthalten kann:

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three
</select>
user327712
quelle
1
Verwenden Sie PHP als Server-Skript für die Verarbeitung
Jaison Justus
1
nur neugierig, warum du das brauchst?
Salil
2
@ Salil. Aus Neugier, wenn es möglich ist
user327712
stackoverflow.com/questions/38180525/… Arbeite für mich.
Caio Andrian

Antworten:

153

Ein Weg, dies zu tun, erstens ein Array, zweitens ein Objekt:

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

Bearbeitet (3 Jahre nach Beantwortung), um beide Werte in das JSON-Format (unter Verwendung JSON.stringify()) zu bringen, da sich meine Proof-of-Concept-Antwort "einen Neuling-Entwickler verwirren könnte".

Robusto
quelle
9
+1 für elegante Lösung. NB Wenn Sie Option zwei verwenden, empfehle ich, im Änderungsereignis $ .parseJSON ($ (this) .val ()) zu verwenden, um ein Javascript-Objekt abzurufen, vorausgesetzt, Sie müssen jeden Wert separat abrufen.
Lucas B
1
-1, weil diese Antwort dazu führt, dass das OP bei der Auswertung der Eingabe ein großes Sicherheitsproblem in seinem Code hat. Der beste Weg, dies zu vermeiden, ist die Verwendung von JSON, wie von @DavidHoerster vorgeschlagen, da sich die Eingabe besser verhält.
Fotanus
5
@fotanus: Mein zweites Beispiel ist ein JSON-Objektliteral, das sich nicht von dem unterscheidet, was die andere Frage vorschlägt. Das Array ist nur ein Beispiel. Es liegt in der Verantwortung des serverseitigen Codes, die Eingabewerte trotzdem zu bereinigen.
Robusto
1
@ Robusto Das zweite Beispiel ist kein gültiger JSON. Es ist andererseits ein Rubinhasch. Bei meinem Problem mit Ihrer Antwort geht es nicht darum, was Sie erklären oder wissen (weil ich glaube, dass Sie wissen, wie man dies sicher macht), sondern darum, was es auslässt und einen neuen Entwickler verwirren könnte (wie es bei einem Freund von mir der Fall war).
Fotanus
11
Gute Lösung, aber damit die Zeichenfolge in JSON analysiert werden kann, müssen die Eigenschaftsnamen in doppelte Anführungszeichen gesetzt werden: value = '{"foo": "bar", "one": "two"}'
Lars-Lasse
51

Ich habe mich heute tatsächlich gefragt, und ich habe es erreicht, indem ich die PHP-Explosionsfunktion wie folgt verwendet habe:

HTML-Formular (in einer Datei namens '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>

PHP-Aktion (in einer Datei namens doublevalue_action.php)

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

Wie Sie im ersten Code sehen können, erstellen wir ein Standard-HTML-Auswahlfeld mit zwei Optionen. Jede Option hat 1 Wert, der ein Trennzeichen (in diesem Fall '|') zum Aufteilen der Werte (in diesem Fall Modell und Farbe) hat.

Auf der Aktionsseite explodiere ich die Ergebnisse in ein Array und rufe dann jedes einzelne auf. Wie Sie sehen können, habe ich sie getrennt und beschriftet, damit Sie den Effekt sehen können, den dies verursacht.

Ich hoffe das hilft jemandem :)

Nedra
quelle
1
Ich finde diese Methode sehr einfach und sehr hilfreich, aber ich frage mich, ob diese Methode von allen Browsern unterstützt wird.
Waiyl Karim
sieht sehr einfach und effizient aus. Vielen Dank
Varun Garg
Genial, erstaunlich, großartig ... Juwel einer Klasse.
user3370889
3
@WaiylKarim Kein Grund, warum es nicht bei allen Browsern funktionieren sollte. Browser sollten sich nicht darum kümmern, was in dem Wert enthalten ist. Und wenn sie Probleme mit einigen Symbolen haben, ist es kein Problem, ein anderes auszuwählen. Wie Punkt oder # oder _ oder ein beliebiges Zeichen, das auf der Serverseite als Trennzeichen verwendet werden kann
Risinek
25

Es ist möglich, mehrere Werte in einer Auswahloption zu haben, wie unten gezeigt.

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

Sie können den ausgewählten Wert für ein Änderungsereignis mit jquery abrufen, wie unten gezeigt.

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

Weitere Details finden Sie in diesem LINK

Vara
quelle
16

Eine Möglichkeit besteht darin, einen Mehrfachwert mit einem durch Kommas getrennten Wert zu setzen

mögen

value ="123,1234"

und auf der Serverseite trennen Sie sie

Haim Evgi
quelle
Wie trenne ich sie auf der Serverseite? (in PHP)
Muhammad Ashfaq
wie Explosionsfunktion
Haim Evgi
12

Wenn ich das tun muss, mache ich die anderen Werte zu Datenwerten und verwende dann js, um sie einer versteckten Eingabe zuzuweisen

<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>
chiliNUT
quelle
1
Dies hat mich teilweise dazu gebracht - ich kann auch .data () verwenden, um sie wieder herauszuholen, wenn Sie bereits ein Element haben (anstatt eine Selektorabfrage durchzuführen). zB myElem.data ('othervalue')
jsh
2
Dies ist technisch gesehen nicht das, was OP verlangt, aber es ist zu 100% das, was ich erreichen wollte, als ich hierher kam. +1 für den einfachen, besseren Weg zu dem, was ich annehme, war das Endziel, einfach zwei Daten in einer Auswahloption zu speichern.
Kalk
5

Wenn Sie diese Informationen in die Datenbank schreiben möchten, warum müssen Sie dann einen Primärwert und 'verwandte' Werte im valueAttribut haben? Warum senden Sie nicht einfach den primären Wert an die Datenbank und lassen den relationalen Charakter der Datenbank den Rest erledigen.

Wenn Sie mehrere Werte in Ihrem OPTIONs haben müssen, versuchen Sie es mit einem Trennzeichen, das nicht sehr häufig vorkommt:

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

...

oder fügen Sie ein Objektliteral (JSON-Format) hinzu:

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

...

Es hängt wirklich davon ab, was Sie versuchen zu tun.

David Hoerster
quelle
4

Werte für jede Option wie setzen

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

Verwenden Sie auf der Serverseite im Falle von PHP Funktionen wie explode [array] = explode ([delimeter], [gebuchter Wert]);

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

Der obige Code gibt ein Array zurück, nur die Zahlen und das ':' werden entfernt

Jaison Justus
quelle
4

Ich habe dies mithilfe von Datenattributen getan. Ist viel sauberer als andere Methoden, die versuchen zu explodieren usw.

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

});
Jack
quelle
4

Was ist mit HTML-Datenattributen? Das ist der einfachste Weg. Referenz von w3school

In deinem Fall

$('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>

Ankit
quelle
1
Damit dies funktioniert, wird "data-" benötigt, und der zweite Teil muss in Kleinbuchstaben geschrieben werden.
Arun Prasad ES
1

Verwenden Sie ein Trennzeichen, um die Werte zu trennen.

<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];
?>
Chad C.
quelle
1

In HTML

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

Für JS

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

ODER FÜR PHP

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

Doppelte Tag-Parameter sind in HTML nicht zulässig. Was Sie tun könnten, ist VALUE="1,2010". Sie müssten jedoch den Wert auf dem Server analysieren.

Witek
quelle
0

Anstatt die Optionen auf der Clientseite zu speichern, besteht eine andere Möglichkeit darin, die Optionen als Subarray-Elemente eines assoziativen / indizierten Arrays auf der Serverseite zu speichern. Die Werte des Select-Tags enthalten dann nur die Schlüssel, mit denen das Sub-Array dereferenziert wird.

Hier ist ein Beispielcode. Dies ist in PHP geschrieben, da das OP PHP erwähnt hat, aber es kann an jede serverseitige Sprache angepasst werden, die Sie verwenden:

<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>';
Kodos Johnson
quelle
0

Dies mag für andere nützlich sein oder auch nicht, aber für meinen speziellen Anwendungsfall wollte ich nur, dass zusätzliche Parameter aus dem Formular zurückgegeben werden, wenn die Option ausgewählt wurde - diese Parameter hatten für alle Optionen die gleichen Werte, also ... meine Lösung war es, versteckte Eingaben in das Formular mit der Auswahl aufzunehmen, wie:

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

Vielleicht offensichtlich ... offensichtlicher, nachdem Sie es gesehen haben.

MangoCat
quelle
-5

Sie können mehrere Attribute verwenden

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

Alex Kumbhani
quelle
Er möchte mehrere Informationen aus einer Auswahl, nicht mehrere Auswahlen.
Barmar