您的位置：首页 > Web前端 > JQuery

JQuery Multi Select With Two ListBox

2012-12-11 11:24 357 查看

jQuery 的寫法如下:

<script type="text/javascript" language="javascript">
$().ready(function () {
$("input[name^='add']").click(function () {
var id = $(this).attr('id').split('_');
if (id[1] == 'all') {
$('#select1 option').remove().appendTo('#select2');
} else {
$('#select1 option:selected').remove().appendTo('#select2');
}
var Mult_SelectListBox = $('#select2 option').map(function () { return $(this).val(); }).get().join(',');
$("#Mult_SelectListBox").attr('value', Mult_SelectListBox);
return false;
});
$("input[name^='remove']").click(function () {
var id = $(this).attr('id').split('_');
if (id[1] == 'all') {
$('#select2 option').remove().appendTo('#select1');
} else {
$('#select2 option:selected').remove().appendTo('#select1');
}
var Mult_SelectListBox = $('#select2 option').map(function () { return $(this).val(); }).get().join(',');
$("#Mult_SelectListBox").attr('value', Mult_SelectListBox);
return false;
});
});
</script>

The Working Test Page 如下:

<html>
<head>
<style type="text/css">
td.selectbox {
float:left;
text-align: center;
margin: 10px;
}
select {
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="selectbox">
<select multiple id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
</td>
<td class="selectbox">
<input type="button" id="add_all" name="add" value=">>" style="width: 60px" /><br />
<input type="button" id="remove_all" name="remove" value="<<" style="width: 60px" /><br />
<input type="button" id="add_one" name="add_one" value=">" style="width: 60px" /><br />
<input type="button" id="remove_one" name="remove_one" value="<" style="width: 60px" /><br />
<input type="hidden" id="Mult_SelectListBox" name="Mult_SelectListBox" value="" /><!—-Request hidden Value -->
</td>
<td class="selectbox">
<select multiple id="select2">
</select>
</td>
</tr>
<tr>
<td>
<input type="button" onclick="submitQuery()" value="submit" />
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

Get value to alert():

function submitQuery() {
var value = $("#Mult_SelectListBox").attr('value');
alert("select2 Value: "+value);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航