三、下拉列表框
（一）语法
（二）
2022年8月13日20:34:16
获取选中标签的文本内容
// 方式一
$('#sjjg option:selected').text();
// 方式二
$('#sjjg').find("option:selected").text()
（三）js控制下拉框的默认选中项
1.重置下拉列表框
实现：
document.getElementById("test").selectedIndex = 0;//或"0"
这里只介绍了第一种实现方式，更多实现方式见文章-js&jquery实现方式对比汇总。
UpdateTime–2017年7月19日11:50:22
2.通过根据隐藏域的值限制下拉框的选中项
举例：
HTML部分
JAVASCRIPT部分
错误实现方式一：
function test (sender) {
var test2 = $('#test2').val();
var test1 = sender.value;
if(test1 != test2) {
$(sender + ' option').each(function(index){
if (test2 == this.value) {
this.selected = true;
}
});
}
}
错在哪里？
目前没有搞清楚咋回事，反正这样会报错
Syntax error, unrecognized expression: [object HTMLSelectElement] option
不推荐使用的实现方式：
HTML部分test(“传该下拉框的id”)
function test(senderId){
var test1=$("#" + senderId).val();
var test2=$("#test2").val();
if(test1 != test2){
$("#aa option[value=" + test2 + "]").attr("selected", true);
}
}
实现效果：不管用户选择哪个选项，都只会选中与隐藏域的值相等的那个选项
不推荐使用的原因：
单独运行这几行代码没有问题，放到web项目中无效（虽然给标签option添加了selected属性，但是却无法选中这个选项）
猜想：
通过控制option标签的selected属性来实现选中该选项，仅仅在初次加载页面时绝对起作用（有效），页面加载完毕，使用js通过这种方式来控制下拉框的选中选项可能会失效。
通过操作select标签来实现（推荐使用）：
function test(senderId){
var test1=$("#" + senderId).val();
var test2=$("#test2").val();
if(test1 != test2){
$("#aa option[value=" + test2 + "]").attr("selected", true);
$("#" + senderId + ' option').each(function(index){
if (test2 == this.value) {
document.getElementById('aa').selectedIndex = index;
}
});
}
}
小结：
通过js来实现对下拉框默认选中项进行控制，不要通过操作option标签来实现，而是通过操作select标签来实现。
实例：
选择拟会诊医院后，可以添加医生信息；如果已经添加过医生信息，必须先清空医生信息才能更改下拉框默认选中项
效果展示：
a.初始化界面
b.选择医院，增加医生信息
c.切换医院，必须先删除医生信息，否则，下拉框选中原来的选项
代码展示：
HTML部分
| 拟会诊医院 |
|
JAVASCRIPT
/**
* 选择拟会诊医院
*/
this.chooseHos = function(senderId) {
// 获取下拉列表框的值
var CON_ORG_IDName = $get(senderId).value;
// 获取隐藏域的值
var orgIdName = $get('orgIdName').value;
// 1.初始化操作（选中请选择选项时）
if ("" != CON_ORG_IDName && "" == orgIdName) {
$get(senderId).setAttribute('title','');
$get('CON_ORG_ID').value = CON_ORG_IDName.split(',')[0];
$get('CON_ORG_NAME').value = CON_ORG_IDName.split(',')[1];
$get('orgIdName').value = CON_ORG_IDName;
return;
}
// 2.判断是否已经添加科室，医生信息
// 获取科室，医生展示的table有多少行数据
var rowsLength = $get('deptDocTable').rows.length;
// 如果已根据拟会诊医院选择了科室和医生，想变更会诊医院时，添加校验
if (CON_ORG_IDName != orgIdName && rowsLength > 1) {
Dialog.Alert('消息提示','请先清空科室，医生信息！',null,null,100);
// 恢复原来选中的选项
$('#' + senderId + ' option').each(function(index) {
// 两值相等选中该选项
if (orgIdName == this.value) {
$get(senderId).selectedIndex = index;
}
});
return;
}
// 3.允许改变下拉框的值并执行相应操作
if ("" == CON_ORG_IDName) {
// 设置下拉框鼠标悬浮时的提示信息
$get(senderId).setAttribute('title','你必须从列表中选择一个项目');
// 信息置空
$get('CON_ORG_ID').value = "";
$get('CON_ORG_NAME').value = "";
$get('orgIdName').value = "";
} else {
// 将下拉框的提示信息置空
$get(senderId).setAttribute('title','');
// 页面赋值
$get('CON_ORG_ID').value = CON_ORG_IDName.split(',')[0];
$get('CON_ORG_NAME').value = CON_ORG_IDName.split(',')[1];
$get('orgIdName').value = CON_ORG_IDName;
}
}
（四）设置下拉框为必选项信息提示
.TextBoxRequired {
border: solid 1px #3f93b7;
width: 96%;
color: #333333;
background: #fefbbd;
}
UpdateTime–2017年6月14日08:53:24
（五）js动态添加下拉项
方法一：
/**
* 查询医院
*/
this.viewHosp = function() {
var param = "";
/**
* 获取医院名称、医院编码及医院ID
*/
var request = new $WebRequest(
baseUrl + "/telemedicine/patient/viewHos.do", param,
function(result) {
getJsonResult(result, function() {
// 1.获取后台数据
var JOSNdata = result.HOSLIST;
// 2.将下拉框置空
$("#HOSID_NAME").empty();
// 3.拼接上"请选择"选项
$("#HOSID_NAME").append('');
// 4.迭代拼接下拉选项
$(JOSNdata).each(function(i,item) {
$("#HOSID_NAME").append(
'');
});
});
});
request.Start();
}
注：这里的Ajax请求是自己封装好的
方法二：（推荐使用）
$.getJSON(baseUrl + "/telemedicine/patient/viewHos.do", param,
function(result) {
// 1.获取后台数据
var JOSNdata = result.HOSLIST;
// 2.移出掉下拉框中的选项（除了第一项）
$("#HOSID_NAME option:gt(0)").remove();
// 3.迭代拼接下拉选项
$(JOSNdata).each(function(i,item) {
$("#HOSID_NAME").append(
'');
});
}
);
UpdateTime–2017年6月14日17:13:41
（六）c标签迭代下拉列表框
1.通常用于新增页面
第一部分：HTML
科室 |
该医疗机构下没有维护科室！
|
第二部分：JAVASCRIPT
window.onload = function() {
// id="FDEPTCODE"的标签，如果页面上存在就在下拉框最前面拼接上；若不存在也不会抛异常
$('#FDEPTCODE').prepend('');
document.getElementById('FDEPTCODE').selectedIndex = 0;
};
2.通常用于修改页面
第一部分：HTML
科室 |
该医疗机构下没有维护科室！
|
第二部分：JAVASCRIPT
window.onload = function() {
// id="FDEPTCODE"的标签，如果页面上存在就拼接上；若不存在也不会抛异常
$('#FDEPTCODE').prepend('');
};
实现效果：
新增页面：如果后台获取的数据不为空，显示下拉框，并添加一个空选项；否则，显示文本提示信息
修改页面：如果后台获取的数据不为空，显示下拉框，添加一个空选项并设置默认选中项；否则，显示文本提示信息
UpdateTime–2017年8月8日10:01:39
（七）自定义属性
HTML部分
JAVASCRIPT部分
window.onload = function() {
// 设置下拉选项标签并为option标签设置自定义属性
var optionHtml = '';
// 为下拉框添加选项
$('#DOCID_NAME').append(optionHtml);
}
/**
* 页面赋值联系方式
*/
function setPhone(sender) {
// 获取医生下拉框的值
var optionValue = sender.value;
if ("" == optionValue) {
// 医生联系方式置空
$get('DOCTOR_PHONE').value="";
return;
}
// 获取该选项的自定义属性FDOCTORPHONE
// 这种方式获取不到
// var FDOCTORPHONE = $(sender).attr('fdoctorphone');
var FDOCTORPHONE = $('#DOCID_NAME option:selected').attr('fdoctorphone');
if (null != FDOCTORPHONE) {
$get('DOCTOR_PHONE').value = FDOCTORPHONE;
} else {
$get('DOCTOR_PHONE').value = "";
}
}
注意：
自定义属性必须全部小写，因为浏览器进行标签解读是会把所有的标签解读成小写；
b.获取选中option标签中的自定义属性，需使用$(‘#DOCID_NAME option:selected’).attr(‘fdoctorphone’)这种方式实现。
我们可以把需要的字段值隐藏到option的自定义属性当中。
小结：
select标签绑定onchange事件时，传参this，this虽然代表当前select标签对象，只能通过这个对象获取选中选项的值（sender.value），无法进行其他操作（（三）和（七）作证）;
2022年8月13日20:21:31
可以利用title属性，增加提示
select id="sjjg" title="请选择一个检验机构" class="TextBox">
option value="">请选择option>
c:if test="${empty model.data}">
option value="">未设置检验机构option>
c:if>
c:forEach items="${model.data}" var="hospital">
option value="${hospital.ORGCODE}">${hospital.ORGNAME}option>
c:forEach>
select>
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！
作者：Marydon
