动态给select赋值

最新推荐文章于 2025-05-18 15:01:12 发布

原创最新推荐文章于 2025-05-18 15:01:12 发布 · 8.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#select #html #下拉框 #下拉框赋值 #动态赋值

前端集结号同时被 2 个专栏收录

61 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

当点击页面中的一些元素，会改变select的值，这样的情况比较多见。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <style type="text/css">
        select {
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            width: 200px;
            height: 30px;
            line-height: 30px;
        }
        ul {
            margin: 30px auto;
            padding: 0;
        }
        li {
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            width: 180px;
            line-height: 30px;
            cursor: pointer;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <select name="country">        
        <option value="0">请选择国家</option>
        <option value="1">泰国</option>
        <option value="2">韩国</option>
        <option value="3">日本</option>
        <option value="4">台湾</option>
        <option value="5">澳门</option>
    </select>
    <ul>
        <li class="sel-country">1</li>
        <li class="sel-country">2</li>
        <li class="sel-country">3</li>
        <li class="sel-country">4</li>
        <li class="sel-country">5</li>
    </ul>
    <script type="text/javascript">
        $(function(){
            $('.sel-country').each(function(){
                $(this).click(function(){
                    var o = $('select[name="country"] option');
                    var l = o.length;
                    console.log(l);
                    for(var i = 0; i < l; i++){
                        if(o.eq(i).attr('value') == $(this).html()){
                            console.log(i);
                            o.eq(i).attr('selected','selected')
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>