jQuery动态赋值给选择器

最新推荐文章于 2021-04-08 18:10:43 发布

weixin_30340775

最新推荐文章于 2021-04-08 18:10:43 发布

阅读量844

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Sam-2018/p/jquery-select-input.html

版权

<!-- 亲测可以使用 -->
<!DOCTYPE html>
<html lang="en">
<script src="../js/jquery-1.8.3.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="featureLayerOptions">
</select>
<!-- 规范的类选择器最好不要采用cc_id这种格式，最好是cc或者cC -->
<p id="cc"></p>

<button οnclick="getValue()">button</button>
<script type="text/javascript">
/*
　　把数组的数据填入选择器中，通过按钮获取selectd的值，并打印出来；
*/
    var aa = "hello world";
    function getValue() {
        var osel=document.getElementById("featureLayerOptions");
        alert(osel.options[osel.selectedIndex].value);//osel为空的时候，value为undefined类型报错；
    }

    var ff=[["hello", "11"], ["world", "12"], ["sam", "perry"]];

    function ffs(param) {
        $("#cc").append("<h1>"+aa+"</h1>");//通过类选择器的扩展方法添加页面标签
        var _tmp="";
        for (var i=0; i<ff.length; i++) {
            _tmp=_tmp+"<option value='"+ff[i][0]+"'>"+ff[i][1]+"</option>";
        }
        $("#featureLayerOptions").append(_tmp);
    }
/*
　　普通的函数声明function foo(){},不调用不执行
　　$(function(){/*...*/});是$(document).ready(function(){/*...*/})的简写形式，是在DOM加载完成后执行的回调函数，并且只会执行一次。
　　对于常见的(function($){...})(jQueryParam);即是将实参jQueryParam传入函数function($){}，通过形参$接收
*/
    $(function(){
        ffs(ff);
    });

</script>
</body>
</html>