前端select关于selected 的"坑"!!!

最新推荐文章于 2024-05-03 09:55:16 发布

老罗uncle

最新推荐文章于 2024-05-03 09:55:16 发布

阅读量3.2k

点赞数

分类专栏： html-dom

本文链接：https://blog.csdn.net/uncle_oluo/article/details/67671401

版权

html-dom 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

大家都知道<select></select>是前端开发html中常用的一个下拉列表的控件.但是你可能不知道的是,它的子元素selected属性有一个大大坑吧...

废话少说,直接上代码(先热个身)

//第一种方式:    

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #next{
                margin-top: 10px;
                width: 50px;
                height: 30px;
                line-height: 30px;
                background-color: gray;
            }

        </style>
    </head>
    <body>
        <select name="change" id="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <div id="next">下一个</div>
    </body>
</html>
<script>
    var page = 0;
    var options = document.getElementsByTagName('option');

    next.onclick = function(){

        page++;

        for(var i = 0; i<options.length;i++){

            options[i].removeAttribute("selected");
        }


        options[page].setAttribute("selected", "selected")

    }

</script>

以上这段代码,给添加selected属性,可以实现通过点击”下一个”按钮,实现select动态改变自己的选项

然后,我们换一种方式实现这个功能:

//第二种方式:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #next{
                margin-top: 10px;
                width: 50px;
                height: 30px;
                line-height: 30px;
                background-color: gray;
                cursor: pointer;
            }

        </style>
    </head>
    <body>
        <select name="change" id="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <div id="next">下一个</div>
    </body>
</html>
<script>
    var page = 0;
    var options = document.getElementsByTagName('option');

    next.onclick = function(){

        page++;

        for(var i = 0; i<options.length;i++){
            options[i].selected=false;
        }

        options[page].selected=true;

    }

</script>

下面是效果

看到这里,我们会发现,这两种方式都可以实现我们的需求,而他们的区别就在于,第一种方式,会在标签上添加上selected属性,而第二种方式则不会

OK,热身完毕,现在是到了给大家展示大坑的时候了!!!!!

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #next{
                margin-top: 10px;
                width: 50px;
                height: 30px;
                line-height: 30px;
                background-color: gray;
                cursor: pointer;
            }

        </style>
    </head>
    <body>
        <select name="change" id="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <div id="next">下一个</div>
    </body>
</html>
<script>
    var page = 0;
    var options = document.getElementsByTagName('option');

    next.onclick = function(){

        page++;

        for(var i = 0; i<options.length;i++){

            options[i].removeAttribute("selected");
        }

        options[page].setAttribute("selected", "selected")
        console.log(page+1)
    }

    val.onchange = function(e){
        for(var i = 0 ; i < options.length; i++){
            if(options[i].selected){
                page = i;
                console.log(page+1)
            }
        }

    }

</script>

在这里可以发现,当我点击 ‘下一个’ 按钮和直接点击select标签,来改变select选项的时候,选项就会发生错乱……

那么,问题来了,为什么会这样呢????

咳咳,真相只有一个!

那是因为我们直接点击select标签切换选项时,其实改变的是option对象的selected属性值(boolean),然后点击'下一个'时,是给<option>标签添加了selected="selected"的属性.而当这两者出现在同一个select的时候,问题就出现了...


++++++++++++++++++++++++++这里答案区的分隔线+++++++++++++++++


解决方案:

    不采用给<option>标签添加selected="selected"属性的方式,
    采用改变option对象selected属性(boolean)的值的方式.

    那么<option>标签的selected="selected"属性沈时候使用呢?

    来来来,看图说话.

老罗uncle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端select关于selected 的"坑"!!!

大家都知道<select></select>是前端开发html中常用的一个下拉列表的控件.但是你可能不知道的是,它的子元素selected属性有一个大大坑吧...废话少说,直接上代码(先热个身)//第一种方式: <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style>
复制链接

扫一扫