tagsInput插件的简单使用

最新推荐文章于 2024-05-14 09:37:19 发布

上弦月Z

最新推荐文章于 2024-05-14 09:37:19 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qq_37825370/article/details/82348244

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="jqueryTagsInput/jquery.tagsinput.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jqueryTagsInput/jquery.tagsinput.min.css" />
</head>
<body class="reset">
<div>
    <input id="tags_1" type="text" class="tagsinput" readonly="readonly"/>
    <div class="flt_l">
        <select id="province1" class="addressInfo">
            <option value="">添加省</option>
            <option value="北京">北京</option>
            <option value="安徽">安徽</option>
            <option value="福建">福建</option>
            <option value="甘肃">甘肃</option>
            <option value="广东">广东</option>
            <option value="广西">广西</option>
        </select>
    </div>
</div>
</body>
<script>
    window.onload = function () {
        $("#province1").change(function () {
            if($("#province1 option:selected").val() != ""){
                add();
            }
        });

        $(function(){
            //变标签
            $('#tags_1').tagsInput({width:'auto'});
        });

        function add(){
            var tags = $("#province1 option:selected").val();
            //避免重复添加
            if (!$('#tags_1').tagExist(tags)){
                $("#tags_1").addTag(tags,{focus:false,callback:false});
            }else{
                alert("该选项已存在！");
            }
            $("#province1").html(
                '<option value="">添加省</option>' +
                '<option value="北京">北京</option>' +
                '<option value="安徽">安徽</option>' +
                '<option value="福建">福建</option>' +
                '<option value="甘肃">甘肃</option>' +
                '<option value="广东">广东</option>' +
                '<option value="广西">广西</option>'
            );
        }
    }
</script>
</html>

上弦月Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tagsInput插件的简单使用

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt; &lt;script src=
复制链接

扫一扫