HTML Select控件的增、删、查、选操作

来源：互联网发布：linux telnet连接失败编辑：程序博客网时间：2024/04/29 21:33
测试环境：
Chrome 54.x
下面是源代码
<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">    <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    <!-- 颜色设定依赖components.min.css文件 -->    <link href="assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />    <link rel="stylesheet" href="assets/layouts/layout/css/layout.css"></head>  <body><!--Date:2017-02-23Author:kagula这里自己记一下，免得每次baidu麻烦-->    <div class="page-container">        <div class="page-content-wrapper">            <div class="page-content">                <h1 class="page-title">HTML Select控件 增、删、查、设置选中 的示例代码                    <small style="margin-left: 8px">依赖Metronic 4.7</small>                </h1>                <div class="row">                    <div class="col-md-3">                        <select class="form-control" id="selectController">                            <option value="0">test 0</option>                            <option value="1">test 1</option>                        </select>                    </div>                    <span class="caption-subject font-red-sunglo bold uppercase" id="selectController_vt">值??文本??</span>                </div>                <div class="row" style="padding: 10px">                    <div class="col-md-1">                        <button type="button" class="btn blue-dark" id="btnAdd" style="margin-right:3pt">Add</button>                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="值" id="btnAdd_value">                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="文本" id="btnAdd_text">                    </div>                </div>                <div class="row" style="padding: 10px">                    <div class="col-md-1">                        <button type="button" class="btn blue-dark" id="btnDel" style="margin-right:3pt">Erase</button>                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="值" id="btnDel_value">                    </div>                </div>                <div class="row" style="padding: 10px">                    <div class="col-md-1">                        <button type="button" class="btn red-mint" id="btnDelAll" style="margin-right:3pt">EraseAll</button>                    </div>                </div>                <div class="row" style="padding: 10px">                    <div class="col-md-1">                        <button type="button" class="btn blue-dark" id="btnQuery" style="margin-right:3pt">Query</button>                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="值" id="btnQuery_value" readonly="true">                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="文本" id="btnQuery_text" readonly="true">                    </div>                </div>                <div class="row" style="padding: 10px">                    <div class="col-md-2">                        <button type="button" class="btn blue-dark" id="btnSel" style="margin-right:3pt">选中指定值的元素</button>                    </div>                    <div class="col-md-1">                        <input type="text" class="form-control" placeholder="值" id="btnSel_value">                    </div>                </div>            </div>        </div>    </div>    <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>    <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>    <script type="text/javascript">        <!-- 必须在ready前引用jquery的依赖 -->        $(document).ready(function () {            function onChange()            {                var val = $("#selectController").find("option:selected").val();                var txt = $("#selectController").find("option:selected").text();                $("span#selectController_vt").html("当前Option的值"+val+"，文本"+txt);            }            $("#selectController").change(onChange).change();            $("#btnAdd").click(function () {                var text = $("#btnAdd_text").val();                var val = $("#btnAdd_value").val();                if(text!=null && val !=null && text.length>0 && val.length>0)                {                    jQuery("#selectController").append("<option value='"+val+"'>"+text+"</option>");   //为Select追加一个Option(下拉项)                } else {                    alert("在按钮的右边填入要添加的值和文本!");                }                $("#selectController option:last").attr("selected", true);//选中最后一个Option                onChange();            });            $("#btnDel").click(function(){                var val = $("#btnDel_value").val();                if(val==null || val.length<1)                {                    alert("请在按钮的右边指定值，这样才能知道要删除哪个option");                    return;                }                console.log("btnDel=>"+val);                $("#selectController option[value='"+val+"']").remove(); //删除Select中Value为指定值的Option                //jQuery("#selectController option:last").remove();//删除最后一个Option                onChange();            });            $("#btnDelAll").click(function () {                $("#selectController").empty();//仅清空option子节点                //$("#selectController").remove();//这条语句连整个元素都删除了，所以很少用到。                onChange();            });            $("#btnQuery").click(function () {                $("#btnQuery_value").val($("#selectController").find("option:selected").val());                $("#btnQuery_text").val($("#selectController").find("option:selected").text());            } );                        $("#btnSel").click(function () {                var val = $("#btnSel_value").val();                console.log("btnSel=>"+val);                if( val==null || val.length<1 )                {                    alert("请在按钮右边，设置要“选中”的值");                    return;                }                //如果没有下面清除“selected”属性的行，多操作几次就会选不中指定的Option                $("#selectController").find("option:selected").attr("selected", false);                //选中指定值的Option                $("#selectController option[value='"+val+"']").attr("selected", true);                onChange();            });        });    </script></body>  </html>
下面是运行效果图
0 0