木子屋
 

标题: jQuery和Vue操作select示例

作者: dnawo

日期: 2022-04-17 10:39 AM

分类: 脚本语言

内容: jQuery操作select示例
复制内容到剪贴板 程序代码<div id="example">
    <select id="select1"></select>
    <p id="p1">Result:</p>
</div>
<script>
    $(document).ready(function(){
        let data = [
            {id:1, name:'A'},
            {id:2, name:'B'},
            {id:3, name:'C'}
        ];
        //添加option
        for(let item of data){
            $("#select1").append(`<option value="${item.id}">${item.name}</option>`);
        }
        //监听change
        $("#select1").change(function(){
            let val = $("#select1 option:selected").val();
            let txt = $("#select1 option:selected").text();
            $("#p1").text(`Result: ${val},${txt}`);
        });
    });
</script>
Vue操作select示例
复制内容到剪贴板 程序代码<div id="example">
    <select v-model="result">
        <option v-for="item in data" :value="item.id">{{item.name}}</option>
    </select>
    <p>Result: {{result}}</p>
</div>
<script>
    new Vue({
        el: '#example',
        data: {
            data:[
                {id:1, name:'A'},
                {id:2, name:'B'},
                {id:3, name:'C'}
            ],
            result: '' //string
        }
    })
</script>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: jQuery和Vue操作sel&#101;ct示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms