How To Show Different Selected Value Than Options Label
I have simple html select:
Solution 1:
I solved this problem using jQuery by adding hidden option that decouples selected value and text. Just override that this hidden option will be selected always and update its value to whatever you want. In this case I used value as text, but it can be stored in some custom a
var val = $("#mySelect").val();
var lbl = $("#mySelect option:selected").text();
$("#mySelect").prepend("<option value='" + val + "' data-value='selected' selected hidden>" + val + "</option>");
$("#mySelect").on('change', function() {
var val = $("#mySelect").val();
var lbl = $("#mySelect option:selected").text();
$("#mySelect option[data-value='selected']").attr('value', val);
$("#mySelect option[data-value='selected']").text(val);
$("#mySelect").val(val);
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><h2>
jQuery hidden option
</h2><selectid="mySelect"style="width:10em"><optionvalue="val1">Some long text for val 1</option><optionvalue="val2">Some long text for val 2</option><optionvalue="val3">Some long text for val 3</option></select>Other approach is use bootstrap-select like in example:
<selectclass="selectpicker">
<option title="Combo 1">Hot Dog, Fries and a Soda</option>
<option title="Combo 2">Burger, Shake and a Smile</option>
<option title="Combo 3">Sugar, Spice and all things nice</option>
</select>
Post a Comment for "How To Show Different Selected Value Than Options Label"