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

问题描述：

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

代替

我试图与下面的代码，但不为我的作品，任何帮助，将不胜感激

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

但它没有t反映选择框值

那么你得值复制到文本 –

你将不得不覆盖'

答

不幸的是，这是而不是可能与本机HTML <select>。但是，您可以查找其他<select>库，可以这样做或编写自己的<select>组件。

答

有假div元素超过select元素
设置pointer-events: none;为fake元素
听事件的select-element
设置的fake元素的text上的select-element

变化 change

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>

你是真棒兄弟，谢谢你:-) –

@GaneshPutta - 我很高兴它的帮助！ _快乐编码_。只需确认浏览器兼容性... – Rayon

答

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>

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

相关推荐