jquery雙擊下拉框內(nèi)容移動(dòng)效果

下面的例子為一個(gè)雙擊下拉框內(nèi)容移動(dòng)效果的demo

掇刀ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="reset.css" type="text/css" rel="stylesheet" />
<script language="javascript">
$(function (){
    //雙擊向右移動(dòng)
    $("#select1").dblclick(function(){
        $("#select1 option:selected").appendTo("#select2");
    })
      
    //雙擊向左移動(dòng)
    $("#select2").dblclick(function(){
        $("#select2 option:selected").appendTo("#select1");
    })
    //全部向右
    $("#moveallright").click(function(){
            $("#select1 option").appendTo("#select2"); 
        })
      
    //全部向左
    $("#moveallleft").click(function(){
            $("#select2 option").appendTo("#select1"); 
        })
      
    //選中的向右
    $("#moveright").click(function(){
        $("#select1 option:selected").appendTo("#select2");
    })
      
    //選中的向左
    $("#moveleft").click(function(){
        $("#select2 option:selected").appendTo("#select1");
    })
      
      
    });
</script>
<style>
*{ font-size:18px;}
select{ width:116px;}
.div1{ width:400px; float:left; text-align:right;}
.div2{ width:400px; float:left; text-align:left; margin-left:50px;}
select,button{ border:1px solid #CCC}
</style>
<title>雙擊下拉框內(nèi)容移動(dòng)</title>
</head>
<body>
<div class="div1">
    <select id="select1" multiple="multiple" size="10">
        <option value="1">選項(xiàng)一</option>
        <option value="2">選項(xiàng)二</option>
        <option value="3">選項(xiàng)三</option>
        <option value="4">選項(xiàng)四</option>
        <option value="5">選項(xiàng)五</option>
        <option value="6">選項(xiàng)六</option>
        <option value="7">選項(xiàng)七</option>
        <option value="8">選項(xiàng)八</option>
    </select>
    <br />
    <button id="moveright">向右移動(dòng)&gt;&gt;</button><br />
    <button id="moveallright">全部向右&gt;&gt;</button><br />
</div>
<div class="div2">
    <select id="select2" multiple="multiple" size="10">
        <option value="9">選項(xiàng)九</option>
    </select>
    <br />
    <button id="moveleft">&lt;&lt;向左移動(dòng)</button><br />
    <button id="moveallleft">&lt;&lt;全部向左</button><br />
</div>
</body>
</html>

當(dāng)前標(biāo)題：jquery雙擊下拉框內(nèi)容移動(dòng)效果
當(dāng)前地址：http://jinyejixie.com/article14/gpegde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、App設(shè)計(jì)、定制開(kāi)發(fā)、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jquery雙擊下拉框內(nèi)容移動(dòng)效果