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

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>

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

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

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

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

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>

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.

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

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

});

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>

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];
?>

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

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.

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

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.

Sie können mehrere Attribute verwenden

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