Rumah > Artikel > hujung hadapan web > Kod fungsi pilih tiruan yang dilaksanakan oleh jQuery_jquery

Kod fungsi pilih tiruan yang dilaksanakan oleh jQuery_jquery

WBOYasal: 2016-05-16 15:44:121352semak imbas

Contoh dalam artikel ini menerangkan fungsi pilih tiruan yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini saya ingin berkongsi dengan anda fungsi pilihan tiruan jQuery ini tidak rumit untuk dilaksanakan. Hanya mengkaji penggunaan pemalam jQuey.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-fselect-cha-method-codes/

Kod khusus adalah seperti berikut:

<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=utf-8>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.select.js" type="text/javascript"></script>
<title>jQuery select</title>
</head>
<style>
.select-my ul,.select-my li{
 margin:0;padding:0;
}
.select-my{
 position:absolute;
 min-width:100px;
 *width:100px;
 left:100px;
 top:20px;
 border:1px solid #aaa;
 border-bottom:none;
} 
.select-my b{
 float:left;
} 
.select-my span{
 float:right;
}
.select-my li{
 width:100%;
 min-height:20px;
 *height:20px;
 border-bottom:1px solid #aaa;
 line-height:20px;
 vertical-align:middle;
}
.select-my img{
 line-height:20px;
 vertical-align:middle; 
}
.select-my .select-my-list{
 border-bottom:none;
}
.select-my .select-my-list{
 display:none;clear:both;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('#select-1').makeSelect({
  className:'my',
   dataValue:[1,2,3],
   dataHtml:['1','二','3'],
   callback:function(){
   $('#msg').val( $('#select-1').val() );//显示选中的值
   }
 });
 $('#select2').makeSelect({
  description:'请',
  logo:['▽','△'],
  className:'',
   dataValue:[1,2,3],
   dataHtml:['<img src=images/a1.jpg width=20 height=20 />1','<img src=images/a2.jpg width=20 height=20 />二','<img src=images/a3.jpg width=20 height=20 />33ssssssssssaaa'],
   callback:function(){
   $('#msg').val( $('#select2').val() );//显示选中的值
   }
 });
});
</script>
<body>
<div class="select" id="select-1"></div>
<div id="select2" style="position:absolute;top:200px;left:200px;">select2</div> 
<div style="position:absolute;left:300px;top:330px;">被选中的值是<input type="text" id="msg"/></div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js untuk menyerlahkan kemahiran box_javascript input semasaArtikel seterusnya：js untuk menyerlahkan kemahiran box_javascript input semasa

Artikel berkaitan

Lihat lagi