選択ボックスの選択値を変更する方法は？つまり、テキストではなく選択した値を表示したいのですか？

Question

私はテキストではなく、選択した値を表示します。 代わり

よう

私はコードの下で試してみましたが、私のための作品は、任意の助けいただければ幸いしない

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

でもそれは恥ずかしい選択ボックスの値が反映されます

Answer 1

悲しいことに、これはではなく、で、ネイティブHTML <select>で可能です。しかし、これを行うことができる他の<select>ライブラリを探したり、これを行う独自の<select>コンポーネントを書くことができます。

Answer 2

• はfake要素
• に設定さpointer-events: none;
要素 selectオーバーフェイク div要素を持っている 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>

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>