HTML的select控件美化

原文:HTML的select控件美化

HTML的select控件美化

CSS：

.div-select
{
    border: solid 1px #999;
    height: 40px;
    line-height: 40px;
    cursor: default;
}

.div-select-text
{
    float: left;
    background-color: #fff;
    height: 100%;
    word-break: keep-all;
    overflow: hidden;
    cursor: default;
}

    .div-select-text > div
    {
        padding: 3px;
        line-height: 34px;
    }

.div-select-arrow
{
    background-color: #fff;
    float: right;
    width: 40px;
    height: 100%;
    color: #999;
    cursor: default;
}

    .div-select-arrow > div
    {
        border: solid 1px #999;
        margin: 2px;
        height: 34px;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 34px;
        font-size: 22px;
    }

.div-select-list
{
    position: absolute;
    float: left;
    top: 100px;
    left: 100px;
    border: solid 1px #999;
    max-height: 300px;
    overflow: auto;
    background-color: #9f9;
    display: none;
    z-index: 9100;
}

    .div-select-list .div-select-item:nth-child(2n+1)
    {
        background-color: #fff;
    }

.div-select-item
{
    height: 50px;
    line-height: 50px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #f2f2f2;
    word-break: keep-all;
    overflow: hidden;
    cursor: default;
}

.div-select-item-hover
{
    background-color: #3399ff!important;
}

.div-select-selected
{
    background-color: #3399ff !important;
}

View Code

JS：

//2015年2月8日
//select美化
var divSelectListIndex = 0;

$(function () {
    initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
    $(".div-select-target").each(function () {
        divSelectListIndex++;
        var select = $(this);

        if (select.css("display") == "none") {
            return;
        }
        else {
            select.css("display", "none")
        }

        if (select.next("div").find(".div-select-list").length == 0) {
            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
        }

        var div = select.next("div");
        var divText = div.find(".div-select-text");
        var divSelect = div.find(".div-select");
        var divArrow = div.find(".div-select-arrow");
        var list = $(".div-select-list-" + divSelectListIndex);

        function updateText(item) {
            divText.find("div").html(item.html());
        }

        select.find("option").each(function () {
            var option = $(this);
            var text = option.html();
            var value = option.attr("value");
            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
            list.find(".div-select-item:last").click(function () {
                var item = $(this);
                var value = item.attr("value");
                select.val(value);
                select.change();
                list.find(".div-select-selected").removeClass("div-select-selected");
                item.addClass("div-select-selected");
                updateText(item);
                list.hide();
            });

            list.find(".div-select-item:last").mouseenter(function () {
                var item = $(this);
                var selectedMark = list.find(".div-select-selected");
                selectedMark.removeClass("div-select-selected");
                selectedMark.addClass("div-select-selected-mark");
                list.find(".div-select-item-hover").removeClass("div-select-item-hover");
                item.addClass("div-select-item-hover");
                updateText(item);
            });
        });

        list.mouseleave(function () {
            var selectedMark = list.find(".div-select-selected-mark");
            if (list.find(".div-select-selected").length == 0) {
                selectedMark.addClass("div-select-selected");
                updateText(selectedMark);
            }
            selectedMark.removeClass("div-select-selected-mark");
            list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        });

        if (select.attr("width")) {
            divSelect.width(select.attr("width") - 2);
            divText.width(divSelect.width() - divArrow.width());
            if (select.attr("width") > list.width()) {
                list.width(divSelect.width());
            }
        }

        div.keydown(function (e) {
            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
            list.find(".div-select-item-hover").addClass("div-select-selected");
            list.find(".div-select-item-hover").removeClass("div-select-item-hover");
            if (e.keyCode == 40) {
                var currentSelected = list.find(".div-select-selected");
                var nextSelected = currentSelected.next(".div-select-item");
                if (nextSelected.length == 0) {
                    nextSelected = list.find(".div-select-item:first");
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    list.scrollTop(0);
                } else {
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    var i = 0;
                    while (nextSelected.position().top < 0
                        || nextSelected.position().top > list.height() - nextSelected.height()) {
                        list.scrollTop(list.scrollTop() + nextSelected.height());
                        if (i++ > 100) break;
                    }
                }
                updateText(nextSelected);
                return false;
            }
            if (e.keyCode == 38) {
                var currentSelected = list.find(".div-select-selected");
                var nextSelected = currentSelected.prev(".div-select-item");
                if (nextSelected.length == 0) {
                    nextSelected = list.find(".div-select-item:last");
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
                }
                else {
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    var i = 0;
                    while (nextSelected.position().top < 0
                        || nextSelected.position().top > list.height() - nextSelected.height()) {
                        list.scrollTop(list.scrollTop() - nextSelected.height());
                        if (i++ > 100) break;
                    }
                }
                updateText(nextSelected);
                return false;
            }
            if (e.keyCode == 13) {
                var selectedItem = list.find(".div-select-selected");
                var value = selectedItem.attr("value");
                select.val(value);
                list.hide();
                select.change();
            }
        });

        divSelect.click(function () {
            $("a").bind("click", function () {
                $("a").unbind("click");
                list.hide();
            });

            if (list.css("display") == "none") {
                list.show();
            }
            else {
                list.hide();
            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);
            list.css("left", divSelect.offset().left);
            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
            }
            if (list.width() < divSelect.width()) {
                list.width(divSelect.width());
            }

            var currentSelected = list.find(".div-select-selected");
            if (currentSelected.position().top > list.height() - currentSelected.height()) {
                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
            }
            return false;
        });

        $("html,body").bind("click", function () {
            list.hide();
        });
        list.click(function () {
            return false;
        });

        function initSelect() {
            list.find(".div-select-selected").removeClass("div-select-selected");
            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
            if (matchItem.length > 0) {
                matchItem.addClass("div-select-selected");
                updateText(matchItem);
            }
        }
        initSelect();
        select.change(function () {
            initSelect();
        });
    }); // $(".div-select-target").each
}

View Code

如何使用：

 第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

View Code

第2步、给select控件加上class="div-select-target" width="200"，其中class="div-select-target"是必须的，width="200"是可选的。完整HTML代码如下：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">
    <select name="sel" class="div-select-target" width="200" >
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">法国</option>
        <option value="4">英国</option>
        <option value="5">俄罗斯</option>
        <option value="6">德国</option>
        <option value="7">韩国</option>
        <option value="8">日本</option>
        <option value="9">印度</option>
        <option value="10">巴西</option>
        <option value="11">意大利</option>
        <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>
        <option value="13">瑞士</option>
        <option value="14">越南</option>
        <option value="15">缅甸</option>
        <option value="16">泰国</option>
        <option value="17">加拿大</option>
        <option value="18" selected="selected">南非</option>
        <option value="19">澳大利亚</option>
        <option value="20">新西兰</option>
        <option value="21">挪威</option>
        <option value="22">巴勒斯坦</option>
        <option value="23">以色列</option>
        <option value="24">新加坡</option>
        <option value="25">马来西亚</option>
        <option value="26">波兰</option>
        <option value="27">国家27</option>
        <option value="28">国家28</option>
        <option value="29">国家29</option>
        <option value="30">国家30</option>
        <option value="31">国家31</option>
        <option value="32">国家32</option>
        <option value="33">国家33</option>
        <option value="34">国家34</option>
        <option value="35">国家35</option>
        <option value="36">国家36</option>
        <option value="37">国家37</option>
        <option value="38">国家38</option>
    </select>
</div>
<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">
    <select name="sel" class="div-select-target" width="200" >
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">法国</option>
        <option value="4">英国</option>
        <option value="5">俄罗斯</option>
        <option value="6" selected="selected">德国</option>
        <option value="7">韩国</option>
        <option value="8">日本</option>
    </select>
</div>

View Code

效果图：

滚动条美化版：

CSS：

.div-select
{
    border: solid 1px #999;
    height: 40px;
    line-height: 40px;
    cursor: default;
}

.div-select-text
{
    float: left;
    background-color: #fff;
    height: 100%;
    word-break: keep-all;
    overflow: hidden;
    cursor: default;
    font-size: 16px;
    font-family: 微软雅黑,雅黑;
}

    .div-select-text > div
    {
        padding: 3px;
        line-height: 34px;
    }

.div-select-arrow
{
    background-color: #fff;
    float: right;
    width: 40px;
    height: 100%;
    color: #999;
    cursor: default;
}

    .div-select-arrow > div
    {
        border: solid 1px #999;
        margin: 2px;
        height: 34px;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 34px;
        font-size: 22px;
    }

.div-select-list
{
    position: absolute;
    float: left;
    top: 100px;
    left: 100px;
    border: solid 1px #999;
    max-height: 300px;
    overflow: hidden;
    background-color: #9f9;
    display: none;
    z-index: 9100;
    font-size: 16px;
    font-family: 微软雅黑,雅黑;
}

    .div-select-list .div-select-item:nth-child(2n+1)
    {
        background-color: #fff;
    }

.div-select-item
{
    height: 50px;
    line-height: 50px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #f2f2f2;
    word-break: keep-all;
    overflow: hidden;
    cursor: default;
}

.div-select-item-hover
{
    background-color: #3399ff!important;
}

.div-select-selected
{
    background-color: #3399ff !important;
}

.div-select-list-scrollbar
{
    position: absolute;
    float: left;
    border: solid 1px #999;
    border-left: 0;
    background-color: #e8e8ec;
    width: 40px;
    height: 300px;
    display: none;
    cursor: default;
    z-index: 9101;
}

.div-select-scrollbar-up
{
    border-bottom: solid 1px #fff;
    height: 39px;
    font-size: 22px;
    line-height: 39px;
    color: #999;
    background-color: #cdcdcd;
    text-align: center;
}

.div-select-scrollbar-pos
{
    height: 220px;
}

    .div-select-scrollbar-pos > div:last-child
    {
        width: 40px;
        height: 20px;
        background-color: #cdcdcd;
    }

.div-select-scrollbar-down
{
    border-top: solid 1px #fff;
    height: 39px;
    font-size: 22px;
    line-height: 39px;
    color: #999;
    background-color: #cdcdcd;
    text-align: center;
}

View Code

JS：

//2015年2月8日
//select美化
var divSelectListIndex = 0;

$(function () {
    initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
    $(".div-select-target").each(function () {
        divSelectListIndex++;
        var select = $(this);

        if (select.css("display") == "none") {
            return;
        }
        else {
            select.css("display", "none")
        }

        if (select.next("div").find(".div-select-list").length == 0) {
            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
        }

        var div = select.next("div");
        var divText = div.find(".div-select-text");
        var divSelect = div.find(".div-select");
        var divArrow = div.find(".div-select-arrow");
        var list = $(".div-select-list-" + divSelectListIndex);
        var scrollbar;
        var scrollbarPosTop;
        var scrollbarPos;
        var scrollbarScrollHeight;
        var scrollbarUp;
        var scrollbarDown;
        var itemHeight;
        var itemCount;
        var itemsHeight;
        var scrollFlag = false;

        function updateText(item) {
            divText.find("div").html(item.html());
        }

        select.find("option").each(function () {
            var option = $(this);
            var text = option.html();
            var value = option.attr("value");
            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
            list.find(".div-select-item:last").click(function () {
                var item = $(this);
                var value = item.attr("value");
                select.val(value);
                select.change();
                list.find(".div-select-selected").removeClass("div-select-selected");
                item.addClass("div-select-selected");
                updateText(item);
                list.hide();
                if (scrollbar) scrollbar.hide();
            });

            list.find(".div-select-item:last").mouseenter(function () {
                var item = $(this);
                var selectedMark = list.find(".div-select-selected");
                selectedMark.removeClass("div-select-selected");
                selectedMark.addClass("div-select-selected-mark");
                list.find(".div-select-item-hover").removeClass("div-select-item-hover");
                item.addClass("div-select-item-hover");
                updateText(item);
            });
        });

        list.mouseleave(function () {
            var selectedMark = list.find(".div-select-selected-mark");
            if (list.find(".div-select-selected").length == 0) {
                selectedMark.addClass("div-select-selected");
                updateText(selectedMark);
            }
            selectedMark.removeClass("div-select-selected-mark");
            list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        });

        if (select.attr("width")) {
            divSelect.width(select.attr("width") - 2);
            divText.width(divSelect.width() - divArrow.width());
        }
        else {
            divText.width(list.width());
        }

        div.keydown(function (e) {
            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
            list.find(".div-select-item-hover").addClass("div-select-selected");
            list.find(".div-select-item-hover").removeClass("div-select-item-hover");
            if (e.keyCode == 40) {
                var currentSelected = list.find(".div-select-selected");
                var nextSelected = currentSelected.next(".div-select-item");
                if (nextSelected.length == 0) {
                    nextSelected = list.find(".div-select-item:first");
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    list.scrollTop(0);
                } else {
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    var i = 0;
                    while (nextSelected.position().top < 0
                        || nextSelected.position().top > list.height() - nextSelected.height()) {
                        list.scrollTop(list.scrollTop() + nextSelected.height());
                        if (i++ > 100) break;
                    }
                }
                updateText(nextSelected);
                updateScrollbarPos();
                return false;
            }
            if (e.keyCode == 38) {
                var currentSelected = list.find(".div-select-selected");
                var nextSelected = currentSelected.prev(".div-select-item");
                if (nextSelected.length == 0) {
                    nextSelected = list.find(".div-select-item:last");
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
                }
                else {
                    nextSelected.addClass("div-select-selected");
                    currentSelected.removeClass("div-select-selected");
                    var i = 0;
                    while (nextSelected.position().top < 0
                        || nextSelected.position().top > list.height() - nextSelected.height()) {
                        list.scrollTop(list.scrollTop() - nextSelected.height());
                        if (i++ > 100) break;
                    }
                }
                updateText(nextSelected);
                updateScrollbarPos();
                return false;
            }
            if (e.keyCode == 13) {
                var selectedItem = list.find(".div-select-selected");
                var value = selectedItem.attr("value");
                select.val(value);
                list.hide();
                if (scrollbar) scrollbar.hide();
                select.change();
            }
        });

        itemHeight = list.find(".div-select-item:first").height();
        itemCount = list.find(".div-select-item").length;
        itemsHeight = itemHeight * itemCount;
        if (itemsHeight > list.height()) {
            $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');
        }
        scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex);
        scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");
        scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");
        scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height();
        scrollbarUp = scrollbar.find(".div-select-scrollbar-up");
        scrollbarDown = scrollbar.find(".div-select-scrollbar-down");
        scrollbar.click(function () {
            return false;
        });
        scrollbarUp.click(function () {
            list.scrollTop(list.scrollTop() - list.height());
            updateScrollbarPos();
        });
        scrollbarDown.click(function () {
            list.scrollTop(list.scrollTop() + list.height());
            updateScrollbarPos();
        });
        scrollbar.mousedown(function () {
            scrollFlag = true;
        });
        scrollbar.mouseup(function () {
            scrollFlag = false;
        });
        scrollbar.mousemove(function (e) {
            if (scrollFlag) {
                var pos = e.pageY - scrollbar.offset().top - 50;
                if (pos <= scrollbarScrollHeight) {
                    scrollbarPosTop.height(pos);
                    list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));
                }
            }
        });

        function updateScrollbarPos() {
            scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));
            if (list.scrollTop() + list.height() == itemsHeight) {
                scrollbarPosTop.height(scrollbarScrollHeight);
            }
        }

        divSelect.click(function () {
            $("a").bind("click", function () {
                $("a").unbind("click");
                list.hide();
                scrollbar.hide();
            });

            if (list.css("display") == "none") {
                list.show();
                scrollbar.show();
            }
            else {
                list.hide();
                scrollbar.hide();
            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);
            list.css("left", divSelect.offset().left);
            var listOffsetTop = list.offset().top;
            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
            }
            if (list.width() < divSelect.width()) {
                if (!(itemsHeight > list.height())) {
                    list.width(divSelect.width());
                }
                else {
                    list.width(divSelect.width() - scrollbar.width());
                }
            }

            scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);
            scrollbar.css("left", divSelect.offset().left + list.width() + 1);
            scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1);
            if ($(window).scrollTop() + $(window).height() < listOffsetTop + list.height() + 2) {
                scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
            }

            var currentSelected = list.find(".div-select-selected");
            if (currentSelected.position().top > list.height() - currentSelected.height()) {
                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
            }
            updateScrollbarPos();

            return false;
        });

        $("html,body").bind("click", function () {
            list.hide();
            scrollbar.hide();
        });
        list.click(function () {
            return false;
        });

        function initSelect() {
            list.find(".div-select-selected").removeClass("div-select-selected");
            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
            if (matchItem.length > 0) {
                matchItem.addClass("div-select-selected");
                updateText(matchItem);
            }
        }
        initSelect();
        select.change(function () {
            initSelect();
        });
    }); // $(".div-select-target").each
}

View Code

效果图：

时间： 2024-10-03 13:14:12

HTML的select控件美化的相关文章

div模拟下拉菜单select控件模块 css实现表单select美化

     div css模拟实现form表单下拉select控件美化与功能实现.可以实现模拟的select表单下拉提交数据传值功能     使用方法与调用方式:$.divselect("#divselect","#inputselect"); "#divselect" 这是哪个模拟列表的盒子的ID,"#inputselect"这个是选择以后给 id="inputselect" 的input隐藏域赋值的哦.

模仿combox(select)控件 省去美化烦恼

select|控件 不用整天为美化select控件烦恼了. 1.可批量美化select控件. 2.可以有onchange句柄. 3.触发onchange的函数可带参数. 3.可以得到select的值. 4.可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条) 5.可设置宽度和高度 API参考: //首先生成一个simulateSelect的实例 //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数; c = new simulateSele

模仿combox(select)控件

select|控件 不用整天为美化select控件烦恼了. 运行代码框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> simulate combox control - http://www.never-online.net </TITLE><META NAME="Generator"

js+CSS实现模拟华丽的select控件下拉菜单效果_javascript技巧

本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

JQuery select控件操作使用总结

JQuery获取和设置Select选项方法汇总如下: 获取select 先看看下面代码: $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text var checkValue=$("#s

select控件在Mozilla和Opera中的问题

select|控件|问题 1. Mozilla和Opera都不支持该字体,改掉DTD也是没有效果.测试在Mozilla Firefox1.5, Opera9.0下都是显示成Arial字体.而特殊符号是支持的. 如:<body id="www.never-online.net"> <div style="font-family:Webdings">6</div> <div>▼</div> </body&

IE6下div层被select控件遮住的问题解决方法

IE6下层被select控件遮住的问题想必大家在布局过程中都有遇到过吧,其实解决方法很简单就是在层里套个iframe,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助   这个应该在网上有很多解决的办法,只不过很多问题解决了之后就忘了,之后遇到了再去找有时就找不到了,就当给自己做个笔记了 方法很简单在层里套个iframe <div>能看见我了吗?<iframe frameborder="0" ></iframe></div> 有一

jquery下拉select控件操作方法分享

 这篇文章主要介绍了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以参考下 JQuery获取和设置Select选项方法汇总如下:   代码:   代码如下: $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected&quo

javascript-js中使用select控件时需要加上form吗？

问题描述 js中使用select控件时需要加上form吗? 在页面中,有表单form1 里面有一个select控件 名称为category.而在js中设置select时,如果document.category.options[tt]=new Option(""""");就无法创建成功. 但是使用document.form1.category.options[tt]=new Option(""""");就可以