2. 程式人生 > >select 左右選擇(js)

select 左右選擇(js)

阿新 • • 發佈：2018-12-30

Select左右選擇!!!(改樣式後可以直接用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select左右選擇</title>
    <style type="text/css">
        .select_margin {margin-left:4px;float:left;}
        .input_margin {margin-left:4px;margin-top:20px;float
 
:left;}
        .select_win {padding: 0 0 0 2px; height: 200px;width: 166px;}
    </style>
</head>
<body>
<span class="select_margin" style="margin-left:50px;">
    <div class="tdlabel_net">選擇列表</div>
    <div>
        <select class="select_win" name="addName" id="addName"
 
 multiple="" ondblclick="javascript:addSel(addName,delName,3);">
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select
 
>
    </div>
</span>
<span class="input_margin">
    <input type="button" onClick="javascript:addSel(addName,delName,3);" value=" > " ><br><br>
    <input type="button" onClick="javascript:delSel(addName,delName);" value=" x " >
</span>
<span class="select_margin">
    <div class="tdlabel_net">已經選擇</div>
    <div>
        <select class="select_win" name="delName" id="delName" multiple="" ondblclick="javascript:delSel(addName,delName);"></select>
    </div>
</span> 
</body>
</html>
<script type="text/javascript">
function addSel(srcAddrSel,srcSelected,maxMember){
    var len=srcSelected.length;
    for(var i=0;i<srcAddrSel.length;i++){
        if((srcAddrSel.options[i]!=null)&&(srcAddrSel.options[i].selected)){
            if(len>=maxMember){
                alert("已選擇的成員不能超過"+maxMember+"個!");
                break;
          }
          srcSelected.options[len]=new Option(srcAddrSel.options[i].value);
          srcSelected.options[len].value=srcAddrSel.options[i].value;
          srcSelected.options[len].text=srcAddrSel.options[i].text;
          srcSelected.options[len].selected=true;
          srcAddrSel.remove(i);
          len++;
          i=i-1
        }
    }
}
function delSel(srcAddrSel,srcSelected){
    console.log(srcAddrSel);
    var len=srcSelected.options.length;
    var length=srcAddrSel.options.length;
    for(var i=0;i<len;i++){
        if((srcSelected.options[i]!=null)&&(srcSelected.options[i].selected==true)){
            srcAddrSel.options[length]=new Option(srcSelected.options[i].value);
            srcAddrSel.options[length].value=srcSelected.options[i].value;
            srcAddrSel.options[length].text=srcSelected.options[i].text;length++
        }
    }
    for(var i=(len-1);i>=0;i--){
        if((srcSelected.options[i]!=null)&&(srcSelected.options[i].selected)){
          srcSelected.options[i]=null;
        }
    }
}   
</script>

相關推薦

select 左右選擇(js)

Select左右選擇!!!(改樣式後可以直接用) <!DOCTYPE html> <html lang="en"> <head> <meta char

25.用js和jquery實現下拉列表的左右選擇

select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

【javaweb】JS實現商品的左右選擇

實現效果： 步驟分析： 1. 確定事件: 點選事件 :onclick事件                    2. 事件要觸發函式 selectOne    

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

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

angular js 左右選擇框 Freemarker+js

Freemarker： <div class="form-group"> <label for="summary" class="col-sm-2 control-label">相關藝人選擇</label> <div class="

用js和select實現選擇頭像和顯示頭像

function setImg(){     var imageSrc = document.registerForm.photo.value;     document.registerForm.img.src = imageSrc; } <select nam

js實現左右選擇框

<script type="text/javascript"> //選擇 function a(){ //var option1=document.getElementsByNam

下拉列表左右選擇案例

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

select 自動選擇 檢查下拉列表

cut comm arrays nes main stat 多選 tools 不支持 下面我們來看一下selenium webdriver是如何來處理select下拉框的，以Apple註冊頁面為例。 https://appleid.apple.com/cgi-bin/Web

select可選擇、同時可自行輸入

val orm cti controls htm text 診斷 class select HTML部分： <li class="bl-form-group"> 　　<label>診斷醫生</label> 　　<div class=

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

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

jquery 下拉框左右選擇

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

select+case選擇語句

select case lamp （1）case語句 語法： case $1 in pattern) 語句1 ;;

關於antd Select 限制選擇個數的解決方案

驗證 [] 發現 orm const 解決方案 限制 message pro 應用場景描述： Select 被form 所包裹，且被getFieldDecorator修飾。所以值的改變應該通過form的setFieldsValue方法。 Select模式肯定會是multip

JavaScript商品的左右選擇

01.商品的左右選擇準備.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01商品的左右選擇準備</title> </hea

JQuery中的商品左右選擇

步驟分析:                 1. 匯入JQ的檔案             

js 獲取select的值 / js動態給select賦值 jQuery獲取

jQuery獲取Select選擇的Text和Value:語法解釋：1. $("#select_id").change(function(){//code...});   //為Select新增事件，當選擇其中一項時觸發2. var checkText=$("#select_id"

【javaweb】JQ實現商品的左右選擇

實現效果： 步驟分析：1. 匯入JQ的檔案                 2. 文件載入函式 :頁面初始化       

jQuery完成下拉列表左右選擇

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

layui實現table新增行功能 table裡有select可選擇可編輯 並且與form表單一起提交資料儲存

廢話不多說 直接上程式碼 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/page/public/