jq程式碼學習12---下拉框左右選擇

阿新 • • 發佈：2019-01-29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css"> 

* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span { 
    display:block; 
    margin:2px 2px;
    padding:4px 10px; 
    background:#898989;
    cursor:pointer;
    font-size:12px;
    color:white;
}
</style>
<!--   引入jQuery -->
<script src 
="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    //移到右邊
    $('#add').click(function() {
    //獲取選中的選項，刪除並追加給對方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左邊
    $('#remove').click(function() {
        $('#select2 option:selected' 
).appendTo('#select1');
    });
    //全部移到右邊
    $('#add_all').click(function() {
        //獲取全部的選項,刪除並追加給對方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左邊
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //雙擊選項
    $('#select1').dblclick(function(){ //繫結雙擊事件
        //獲取全部的選項,刪除並追加給對方
        $("option:selected",this).appendTo('#select2'); //追加給對方
    });
    //雙擊選項
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
</script>

</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <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>
            <option value="6">選項6</option>
            <option value="7">選項7</option>
        </select>
        <div>
            <span id="add" >選中新增到右邊&gt;&gt;</span>
            <span id="add_all" >全部新增到右邊&gt;&gt;</span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">選項8</option>
        </select>
        <div>
            <span id="remove">&lt;&lt;選中刪除到左邊</span>
            <span id="remove_all">&lt;&lt;全部刪除到左邊</span>
        </div>
    </div>


</body>
</html>

jq程式碼學習12---下拉框左右選擇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

jquery 下拉框左右選擇

float center con charset lin ng- bsp head highlight html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g

jQuery外掛實現select下拉框左右選擇_交換內容（multiselect2side）的一些網站 (有時間整理)

http://blog.csdn.net/mexican_jacky/article/details/51151495 http://blog.csdn.net/nihaoma71121/article/details/50971672 http://www.t

jQuery學習(七)——使用JQ完成下拉列表左右選擇

谷歌瀏覽器 opp 榮耀學習華為 style 1.8 script cname 1、需求：實現以下功能 2、步驟分析：第一步：確定事件(鼠標單擊事件click) 第二步：獲取左側下拉列表被選中的option($(“#left option:selected”)) [

Jquery下拉框左右新增刪除移動

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="下拉框左右新增刪除.aspx.cs" Inherits="下拉框左右新增刪除" %> <!DOCTYPE html PUBLIC "-//W

下拉列表左右選擇案例

獲取是否 cti 全部 options itl 標簽 cli pan 單個添加的操作1、得到select裏面的option -getElementsByTagName（）返回是數組 -遍歷數組，得到每一個option 2、判斷opti

robotframework使用之下拉框的選擇

() $1 選擇 framework 但是 list tro key rom 選擇下拉框有幾種方式處理，首先在瀏覽器F12選擇下拉框 1. F12後看見下拉框的源碼是<option xxx> <select class="w_60" data-react

Robotframework下拉框的選擇

Robotframework 下拉框 Robotframework下拉框的選擇用到的關鍵字為：1.Select form List其意思是從列表中選擇需要的值。例如：從該Options中選擇一個時間其帶的參數為：Arguments:[ locator | items]locator為該下拉框的定位，i

bootstrap select 下拉框沒選擇

itl boot span att 解決時也 tle spa sele 情況：根據取得的值去選定select下拉框的選項。但不知為何每次根據select的id傳遞值過去了，也能取得對應的值，但是頁面上的select依然是下拉框第一個選項，但點擊下拉框時，會在對應的值有特殊

Js獲取下拉框當前選擇項的文字和值

　現在有一個Id為AreaId的下拉框，要獲取它當前選擇項的文字和值有以下方法： <span class="red">* </span> 地     

jQuery完成下拉列表左右選擇

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列表左右選擇</title> <script type="text/ja

JQuery下拉列表左右選擇

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列表左右選擇</title> </head> <script typ

從下拉框中選擇年份和該年的週數，計算出該周的開始日期和結束日期

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

jquery---如何獲取select下拉框當前選擇的文字

<select name="area" id="areaid"> <option value="">--請選擇--</option> <option valu

python3.5+selenium3.4自動化測試3_下拉框迴圈選擇

這邊繼續講登陸和登出的介面，現在有越來越多的登陸介面設計中英文登陸介面，或多語言登陸介面，一般以下拉框的形式存在對這個介面使用firebug-firepath檢視老規矩先上下程式碼 # _*_ coding: utf-8 _*_ imp

combobox下拉框預設選擇了第一值——easyUI

/***機種下拉框預設選擇了第一值*/$('#ID').combobox({ url:'${pageContext.request.contextPath}/machineType/getAllMachineTypelist', valueF

python selenium 下拉框的選擇

1、首先匯入Select （S大寫） from selenium.webdriver.support.ui import Select 2、介面展示圖 3、使用三種方法對下拉框元素定位（GZcontent().xs() 這個是我進行分層管理的路徑，需要自己

select下拉框，選擇其中一個，然後進行查詢，完成之後，頁面上的select框不回顯當前查詢時選中的值

開發十年，就只剩下這套架構體系了！ >>>

左右兩個下拉框裏的內容互換

htm ntb 並且 oct size 內容 utf tel value <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

html之多行文本textarea 及下拉框select（12）

class tar value sel image 青島規範 input .post 1.多行文本多行文本使用textarea標簽，默認值需要寫在中間，和input標簽不同，name屬性用於後臺獲取數據（request.POST.get(meno)） <b

jq程式碼學習12---下拉框左右選擇

相關推薦