jQuery和Vue操作select示例

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>