HTML select 用法及常用事件

前言

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

简单实例

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

开发实例（添加）

   <div class="form-group"><div class="row"><div class="col-sm-6">
	<label class="col-sm-3 control-label">医院</label>
	<div class="col-sm-9">
	<select id="hospitalCode" name="hospitalCode" data-placeholder="选择医院..." class="chosen-select" >
		<option value="" >请选择</option>
		  [#list hospitals as hospital]
		  <option value="${hospital.code}" >${hospital.code}-${hospital.name}</option>
		  [/#list]
	</select>
	</div>
	</div></div></div>

开发实例（修改）

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

<div class="form-group"><div class="row"><div class="col-sm-6">
	<label class="col-sm-3 control-label">借出类型</label>
	<div class="col-sm-9">
		<select id="lendType" name="lendType" data-placeholder="选择类型..." class="chosen-select" >
			<option value="" >请选择</option>
			[#list lendTypes as lendType]
			  [#assign type = "" /]
			  [#if lendRecord.lendType??]
			    [#if lendType == lendRecord.lendType]
			    [#assign type = "selected" /]
			    [/#if]
			  [/#if]
			  <option value="${lendType}" ${type}>${lendType.getValue()}</option>
			[/#list]
		</select>
	</div>
</div></div></div>

常用事件

onchange （选择后触发）

方式一

通过 JS 直接监听 select id。

HTML

<div class="form-group"><div class="row"><div class="col-sm-6">
	<label class="col-sm-3 control-label">医院</label>
	<div class="col-sm-9">
	<select id="hospitalCode" name="hospitalCode" data-placeholder="选择医院..." class="chosen-select" >
		<option value="" >请选择</option>
		  [#list hospitals as hospital]
		  <option value="${hospital.code}" >${hospital.code}-${hospital.name}</option>
		  [/#list]
	</select>
	</div>
	</div></div></div>

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

<div class="form-group"><div class="row"><div class="col-sm-6">
	<label class="col-sm-3 control-label">医院</label>
	<div class="col-sm-9">
	<select id="hospitalCode" name="hospitalCode" data-placeholder="选择医院..." class="chosen-select" onchange="check()">
		<option value="" >请选择</option>
		  [#list hospitals as hospital]
		  <option value="${hospital.code}" >${hospital.code}-${hospital.name}</option>
		  [/#list]
	</select>
	</div>
	</div></div></div>

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);
						    }
						}
					}
				})
          }
}

总结

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