jq表单元素select添加移除选项

最新推荐文章于 2020-08-19 10:18:04 发布

转载最新推荐文章于 2020-08-19 10:18:04 发布 · 952 阅读

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一个使用HTML和jQuery操作Select元素的具体示例。通过添加和移除选项，展示了如何利用JavaScript实现两个下拉框之间的数据交互。此示例有助于理解如何在网页中动态更新选择框的内容。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<select name="" id="sel1" size="2">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>
//添加按钮
<input type="button" value="添加" id="addBtn">
//移除按钮
<input type="button" value="移除" id="removeBtn">
第二个select
<select name="" id="sel2" size="2"></select>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    //A.appendTo(B) 把A插入到B的末尾
    /*$('#addBtn').click(function () {
        $('#sel1 :selected').appendTo('#sel2');//$('#sel1 option:selected')
    });
    $('#removeBtn').click(function () {
        $('#sel2 :selected').appendTo('#sel1');
    })*/

    //本身存在
    $('#addBtn').click(function () {
        var res = $('#sel1 :selected').html();
        var flag = true;
       $('#sel2 option').each(function () {
           //遍历
           var txt = $(this).html();
           if(txt===res){
                flag = false;
           }
       });
       if(flag){
           $('#sel1 :selected').clone().appendTo('#sel2');
       }
    });
    $('#removeBtn').click(function () {
          $('#sel2 :selected').remove();
    })
</script>
</body>
</html>