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

Question

我想显示所选的值，而不是文本。 喜欢

代替

我尝试使用以下代码，但对我没有任何帮助，我们将不胜感激

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但它不反映选择框值

Answer 1

• 假定div元素超过select元素
• 为pointer-events: none;元素
设置fake
• 收听change
的select-element事件
• 在更改text
时设置fake元素的select-element

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

可悲的是，使用原生HTML <select>可能 。但是，您可以查找可以执行此操作的其他<select>库，也可以编写自己的<select>组件来执行此操作。

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>