动态给select赋值

来源：互联网发布：按键精灵源码库编辑：程序博客网时间：2024/05/16 06:47

当点击页面中的一些元素，会改变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>

0 0