如何更改选择框的选择值？ 这意味着我想显示选定的值，而不是文本？

Question

i want to display the selected value, rather than the text. like

instead

i have tried with below code, but doesn't works for me, any help would be appreciated

 <select class="form-control" name="identity" id="identity"> <option value="CC">Cédula de Ciudadanía</option> <option value="CE">Cédula Extranjera</option> <option value="NIT">Nit</option> <option value="TI">Tarjeta de Identidad</option> <option value="PPN">Pasaporte</option> <option value="SSN">Número de Seguridad Social</option> <option value="LIC">Licencia de Conducción</option> <option value="DNI">DNI</option> </select> 

but it sholud not reflect the select box values

Answer 1

• Have a fake div element over select element
• Set pointer-events: none; for fake element
• Listen change event of select-element
• Set the text of the fake element on change of the select-element

 var $identity = $('#identity'); var $fake = $('#fake'); $fake.css($identity[0].getBoundingClientRect()); $identity.on('change', function() { $fake.text($(this).find('option:selected').text()); }).change(); 

 #fake { pointer-events: none; border: 1px solid black; padding: 3px; } #identity { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select class="form-control" name="identity" id="identity"> <option value="CC">Cédula de Ciudadanía</option> <option value="CE">Cédula Extranjera</option> <option value="NIT">Nit</option> <option value="TI">Tarjeta de Identidad</option> <option value="PPN">Pasaporte</option> <option value="SSN">Número de Seguridad Social</option> <option value="LIC">Licencia de Conducción</option> <option value="DNI">DNI</option> </select> <div id="fake" style="position:absolute;"></div> 

Answer 2

Sadly, this is not possible with the native HTML <select> . But, you can look for other <select> libraries which can do this or write your own <select> component which does this.

Answer 3

 var $identity = $('#identity'); var $fake = $('#fake'); $fake.css($identity[0].getBoundingClientRect()); $identity.on('change', function() { $fake.text($(this).find('option:selected').val()); }).change(); 

 #fake { pointer-events: none; border: 1px solid black; padding: 0px; height: 32px !important; line-height: 32px; } #identity { opacity: 0; height: 32px !important; line-height: 32px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select class="form-control" name="identity" id="identity"> <option value="CC">Cédula de Ciudadanía</option> <option value="CE">Cédula Extranjera</option> <option value="NIT">Nit</option> <option value="TI">Tarjeta de Identidad</option> <option value="PPN">Pasaporte</option> <option value="SSN">Número de Seguridad Social</option> <option value="LIC">Licencia de Conducción</option> <option value="DNI">DNI</option> </select> <div id="fake" style="position:absolute;"></div>