2016-09-28 122 views
0

我想显示选定的值,而不是文本。 像 enter image description here如何更改选择框的选定值?这意味着我想显示选定的值,而不是文本?

代替

enter image description here

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

<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反映选择框值

+1

那么你得值复制到文本 –

+0

你将不得不覆盖'

回答

0

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

1
  • 有假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>

+0

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

+1

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

0

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>

相关问题