HTML select 用法及常用事件

前言

用于记录开发中常用到的，快捷开发

简单实例

Volvo

Saab

Mercedes

Audi

开发实例（添加）

开发实例（修改）

根据添加后选择结果，编辑时默认展示选择的结果

常用事件

onchange （选择后触发）

方式一

通过 JS 直接监听 select id。

HTML

JS

document.getElementById("hospitalCode").onchange =function(){

const code = document.getElementById("hospitalCode").value

if (code != null) {

$.ajax({

url: "${base}/admin/hospital_group/get_hospital_grade.json",

type: "POST",

cache: false,

data: {"code":code},

success: function(data) {

if(data){

var json = $.parseJSON(data)

if (json.code === "1") {

// 赋值

$("#hospitalGrade").attr("value",json.object);

}

}

}

})

}

}

方式二

传统的方式，在 select 标签上加一个 onchange 。

HTML

JS

function check(){

const code = document.getElementById("hospitalCode").value

if (code != null) {

$.ajax({

url: "${base}/admin/hospital_group/get_hospital_grade.json",

type: "POST",

cache: false,

data: {"code":code},

success: function(data) {

if(data){

var json = $.parseJSON(data)

if (json.code === "1") {

// 赋值

$("#hospitalGrade").attr("value",json.object);

}

}

}

})

}

}

总结

后续用到的我会继续写进去，如果有大佬遇到其他常用的，欢迎评论