jquaryデュアルselectの使い方
プロジェクトは2つのselectを使用します.これは、単一のselect間で左右に異動し、すべての異動を完了します.最後に、必要な値を文字列としてコミットします.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select </title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<!-- css -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!-- -->
//
function left_to_right(){
var selectText=$("#emp_left").find("option:selected").text();
var selectValue=$("#emp_left").val();
// select
if (null==selectValue||selectValue=="") {
alert(" ！");
return;
}else{
var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; //
$("#emp_right").append(selectop);
$("#emp_left option:selected").remove();
}
};
////
function right_to_left(){
var selectText=$("#emp_right").find("option:selected").text();
var selectValue=$("#emp_right").val();
// select
if (null==selectValue||selectValue=="") {
alert(" ！");
return;
}else{
var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; //
$("#emp_left").append(selectop);
$("#emp_right option:selected").remove();
}
};
//
function all_left_to_right(){
var $options = $('#emp_left option');
$options.appendTo('#emp_right');
$('#emp_left option').remove();
}
//
function all_right_to_left(){
var $options = $('#emp_right option');
$options.appendTo('#emp_left');
$('#emp_right option').remove();
}
// ,
function submitMyForm(){
var subtext="";
$('#emp_right option').each(function() {
subtext += $(this).val()+',';
});
alert(subtext);
}
</script>
</head>
<body>
<table>
<tr>
<td align="right">
<select name="emp_left" id="emp_left" class="select_emp" size="30">
<option value="1" selected="selected">
111111111111
</option>
<option value="2" selected="selected">
22222222222
</option>
<option value="3" selected="selected">
3333333333333
</option>
<option value="4" selected="selected">
44444444444444
</option>
<option value="5" selected="selected">
5555555555555555
</option>
<option value="6" selected="selected">
66666666666666666666
</option>
<option value="7" selected="selected">
77777777777777777777777
</option>
</select>
</td>
<td>
</td>
<td valign="middle" align="center" class="btn_move">
<table>
<tr>
<td>
<img src="images/toright.jpg" style="cursor: pointer;"
onclick="left_to_right()" />
</td>
</tr>
<tr>
<td>
<img src="images/toleft.jpg" style="cursor: pointer;"
onclick="right_to_left()" />
</td>
</tr>
<tr>
<td>
<img src="images/alltoright.jpg" style="cursor: pointer;"
onclick="all_left_to_right()" />
</td>
</tr>
<tr>
<td>
<img src="images/alltoleft.jpg" style="cursor: pointer;"
onclick="all_right_to_left()" />
</td>
</tr>
<tr>
<td>
<img src="images/button_cancel.gif" style="cursor: pointer;" />
</td>
</tr>
<tr>
<td>
<img src="images/ok.gif" style="cursor: pointer;"
onclick="submitMyForm()" />
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<select name="emp_right" id="emp_right" class="select_emp" size="30">
<option value="8" selected="selected">
8888888888888888
</option>
</select>
</td>
</tr>
</table>
</body>