Preface
Used to record commonly used in development, quick development
Simple example
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Development instance (add)
<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>
Development example (modification)
According to the selected results after adding, the selected results will be displayed by default when editing.
<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>
Common events
onchange (triggered after selection)
method one
Directly monitor select id through JS.
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);
}
}
}
})
}
}
Method 2
The traditional way is to add an onchange to the select tag.
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);
}
}
}
})
}
}
Summarize
I will continue to write in what I will use later. If anyone comes across other commonly used ones, please comment.