$(document).ready(function(e) {
$('#selectBox').focus(function() {
$(this).attr('size',4);
$(this).css('position',"absolute");
$(this).css('x-index',"1000");
});
$('#selectBox').blur(function() {
$(this).attr('size',1);
\t \t $(this).css('position',"relative");
\t \t $(this).css('x-index',"0");
});
\t $('#selectBox2').focus(function() {
$(this).attr('size',4);
$(this).css('position',"absolute");
$(this).css('x-index',"1000");
});
$('#selectBox2').blur(function() {
$(this).attr('size',1);
$(this).css('position',"relative");
$(this).css('x-index',"0");
});
});
<div class="container" style="border:1px solid #00C;">
<div class="row">
<input type="text" placeholder="name" />
<input type="text" placeholder="add" />
<input type="text" placeholder="city" id="city" />
<input type="text" placeholder="tel" />
<input type="text" placeholder="home" />
<input type="text" placeholder="cun" id="cun" />
<br />
<select id="selectBox">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<br />
<br />
<select id="selectBox2">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
CLECK TO SEE JS FIDDLE
選項列表UI的機制是到瀏覽器和/或操作系統,也沒有從Javascript控制它的方法。如果你想要更多的控制,可以用一個CSS菜單代替'
'@ Barmar'你能否給我提供任何有關'Select2'的鏈接或示例 – Vijay
我真的同意@Barmar –