Versteckte Eingabefelder in HTML übergeben Wählen Sie die Option

Question

Weiß jemand, ob es möglich ist, einen versteckten Anfrageparameter mit einem <select><option> Element in einem HTML-Formular zu übergeben?

So, zum Beispiel, wenn der Benutzer <option value="foo">foo</option> aus einer <select> Liste von Optionen ausgewählt, könnte ich irgendwie einen versteckten Wert in, sowie die "foo" -Wert übergeben, und abrufen, dass als Request-Parameter? Z.B. <input type="hidden" name="x" value="bar"/> würde es mir ermöglichen, die Werte "foo" und "bar" aus der Anfrage zu erhalten, wenn der Benutzer die foo-Option ausgewählt hat.

Dank

Answer 1

Eine Auswahlliste enthält sowohl einen Wert, der dem Benutzer angezeigt wird, als auch einen Wert, der im Formularpost an den Server zurückgegeben wird. So könnte man eine Art von Trennzeichen in den gesetzten Wert verwenden, um beide Werte gesendet, um wieder und dann analysieren sie an diesem Punkt:

 <select id="myselectlist" > 
      <option value="foo|bar">foo</option> 
      <option value="foo2|bar2">foo2</option> 
     </select> 

Aber noch besser wäre es, einen ID-Wert zurückzugeben, die Sie dann verwenden können, um wissen, welches Element wurde aus einer Datenbank ausgewählt und es verwendet, auch den zweiten verwandten Artikel zu sehen:

 <select id="myselectlist" > 
      <option value="123">foo</option> 
      <option value="124">foo2</option> 
     </select> 

Ihre Datenbank könnte wie folgt aussehen:

ID DisplayValue OtherData 
123 foo   bar  
124 foo2   bar2  

Answer 2

Es ist die Formulareingabe type='hidden', die Sie unten das onchange Ereignis des Auswahl Drop aktualisieren könnten, dann wäre es mit der Form geschrieben werden. Ich vermute, dass Sie ein Array der möglichen Werte für die ausgeblendete Eingabe in derselben Reihenfolge wie ihre Entsprechungen in der Auswahl Dropdown erstellen und dann auf den Wert im Array mithilfe der -Eigenschaft des SELECT-Elements zugreifen möchten.

Answer 3

Hier ist eine alternative Lö unter der Annahme, dass jQuery verfügbar ist. Wenn Sie eine andere js-Dienstprogrammbibliothek als jQuery oder gar keine Bibliothek verwenden, ist dies weiterhin möglich. Es bindet nur eine Funktion an das onchange-Ereignis des Selects und analysiert den json von einem benutzerdefinierten Datenattribut.

<form> 
<select name="AnySelect"> 
<option value="primary-value0" data-support='["test",128,2014,"blackberry"]' /> 
<option value="primary-value1" data-support='["test1",39,2013,"apricot"]' /> 
<option value="primary-value2" data-support='["test2",42,2012,"peach"]' /> 
<option value="primary-value3" data-support='[null,null]' /> 
<option value="primary-value4" data-support='[30,28,null]' /> 
</select> 
. 
. 
. 
<span style="visibility: hidden" id="Support_AnySelect-container"><span> 
</form> 

^ Markup ------- JavaScript v

//bind onchange once document is loaded and ready 
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); }); 

function UpdateHidden(event) 
{ 
    //Create a base name for grouping dynamic values; ex: Support_AnySelect 
    Name='Support_'+SelectField.attr('name'); 

    //Check if container was made for us already 
    Contain=$(this.parent).find('#'+Name+'-container'); 

    if(Container.length===0) //make the container if missing 
    { 
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>'); 
    Contain=$(this.parent).children('#'+Name+'-container'); 
    } 

    //get our special multi-values, jQuery will auto decode the JSON 
    SupportValues = this.data('support'); 

    Contain.empty(); //get rid of last select options 
    $.each(SupportValues,function(i,val) 
    { 
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>'); 
    }); 
} 

Wichtigster Vorteil davon ist, dass es sollte in der Theorie, können Sie eine ‚variable Menge von Variablen schreiben "Aus der Form. Sie können das Skript auch anpassen, um bestimmte verschachtelte Objekte zu berücksichtigen. Solange Sie gültiges JSON an das Datenattribut Ihrer Wahl übergeben.

Wenn jemand dies ausprobiert, bevor ich es tue, lass es mich wissen. Ich werde das später testen, kann aber einige kleinere Fehler haben. Sie sollten in der Lage sein, dies für jedes select-Element zu verwenden, und versteckte Eingaben werden automatisch in ein anderes Element eingefügt. Skript sollte auch garantieren, dass diese in der gleichen Form für Sie sind und eindeutige, aber gruppierte Namen über HTTP-Array haben.