欢迎光临

木子屋

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

作者: dnawo

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

分类: 脚本语言

内容: jQuery操作select示例
复制内容到剪贴板 程序代码<div id="example">
<select id="select1"></select>
<p id="p1">Result:</p>
</div>
<script>
.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 1.918 ms

返回

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.918 ms

返回

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.965 ms

返回