HTML select 复选框互相值转换

最新推荐文章于 2025-06-19 03:39:14 发布

原创最新推荐文章于 2025-06-19 03:39:14 发布 · 844 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文详细探讨了如何在HTML中实现select元素与复选框之间的值相互转换，包括利用JavaScript或者jQuery进行操作，以及在实际应用中可能遇到的问题和解决方案，帮助开发者更高效地处理表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
select {
width: 100px;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
function anniu() {
var s = $("#s1 option");

$("#s2").append(s);

}

function anniu2() {
var s = $("#s2 option");

$("#s1").append(s);

}

function anniu3() {
var s = $("#s1 option:selected");

$("#s2").append(s);

}

function anniu4() {
var s = $("#s2 option:selected");

$("#s1").append(s);

}
</script>

</head>

<body>

<select id="s1" multiple="multiple">
<option value="1" selected="selected">11111111</option>
<option value="2">aaaaaaw</option>
<option value="3">AAAAAA</option>
<option value="4">22222222</option>
<option value="5">bbbbbb</option>
<option value="6">BBBBB</option>
</select>

<input type="button" onclick="anniu()" value="---->" />
<input type="button" onclick="anniu3()" value="-->" />
<input type="button" onclick="anniu4()" value="<--" />

<input type="button" onclick="anniu2()" value="<----" />

<select id="s2" multiple="multiple">

</select>

</body>

</html>