In einer select Box den Inhalt der option in den value eintragen; in einer select Box die ausgewählte option übertragen – mit jQuery

Eine vielleicht etwas sperrige Überschrift aber ein hübscher Code.

Gesetzt, man hat folgendes HTML:

<select id="select">
  <option>Pastinaken</option>
  <option>Kartoffeln</option>
  <option>Rüben</option>
  <option>Spinat</option>
</select>

dann kann man damit zunächst wenig anfangen – weil in den option tags kein value steht. Mit einer einzigen Zeile jQuery (die man auf 3 Zeilen aufteilen kann) bekommt man den Inhalt der option Felder in das jeweilige value:

$( "#select" ).find( "option" ).each(function( index ) {
  $(this).val($( this ).text());
});

Erzeugt:

<select id="select">
  <option value="Pastinaken">Pastinaken</option>
  <option value="Kartoffeln">Kartoffeln</option>
  <option value="Rüben">Rüben</option>
  <option value="Spinat">Spinat</option>
</select>

Wenn man in seinem Formular den ausgewählten option Wert übertragen will, bietet sich ein hidden field an:

<input id="wert" type="hidden" value="" name="wert">

dessen value man dynamisch befüllt:

$( "#select" ).on('change', function () {
  var selected = $( "#select option:selected" ).text();
  $( "#wert" ).val(selected);
});