下拉列表框select

 

下拉列表框select

CreateTime--2017年5月15日15:39:24

Author:Marydon

三、下拉列表框

　　（一）语法

　　　　<select></select>

　　（二）<option>标签的value属性

　　说明：<option>标签的value属性一定得加，不加的话，form表单提交数据时，会将<option>标签所包含的内容提交。

<select name="FVISTYPE" style="width: 100px;">
    <!-- 如果value属性没有声明，提交的值是“全部”，而不是""空字符串 -->
    <option selected="selected" value="">
        全部
    </option>
    <option value="7">
        慢性病
    </option>
    <option value="19">
        门诊重大疾病
    </option>
</select>

<select id="FCOMLVL" name="FCOMLVL" style="width: 100px;">
　　<option value="">
   　　<c:out value="请选择"></c:out>
   </option>
   <c:forEach var="row" items="${model.leveldata}" varStatus="s">
   　　<option value="${row['FDICTCODE']}">
      　　<c:out value="${row['FDICTNAME']}"></c:out>
      </option>
   </c:forEach>
</select>

　　（三）js控制下拉框的默认选中项

　　　　1.重置下拉列表框

<select id="test" name="t">
    <option value="1">一</option>
    <option value="2">二</option>
    <option value="3" selected>三</option>
</select>

　　　　实现：

document.getElementById("test").selectedIndex = 0;//或"0"

　　　　注：这里只介绍了第一种实现方式，更多实现方式见文章-js&jquery实现方式对比汇总。

　　　　UpdateTime--2017年7月19日11:50:22

　　　　2.通过根据隐藏域的值限制下拉框的选中项

　　　　举例：

　　　　HTML部分

<select id="aa" onchange="test(this);">
    <option value="">qingxuanze</option>
    <option value="1" selected>yi</option>
    <option value="2">er</option>
    <option value="3">san</option>
</select>
<input id="test2" type="hidden" value="3"/>

　　　　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部分

<td class="tdbiejing" nowrap="nowrap">拟会诊医院</td>
<td nowrap="nowrap" class="tdStyle">
    <select id="nhzyy" onchange="consAppl_search.chooseHos('nhzyy');" class="TextBoxRequired" oldClass="TextBoxRequired" title="你必须从列表中选择一个项目">
        <option value="">请选择</option>
        <c:forEach items="${model.data }" var="hospital">
            <option value="${hospital.ORGID },${hospital.ORGNAME }">${hospital.ORGNAME }</option>
        </c:forEach>
    <lect>
    <!-- 拟会诊医院ID -->
    <input type="hidden" name="CON_ORG_ID" id="CON_ORG_ID"/>
    <!-- 拟会诊医院名称 -->
    <input type="hidden" name="CON_ORG_NAME" id="CON_ORG_NAME"/>
    <!-- 用于校验 -->
    <input type="hidden" id="orgIdName" value=""/>

</td>

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

<select onchange="this.value!=''?this.setAttribute('title',''):this.setAttribute('title','你必须从列表中选择一个项目！');"
    name="HOSID_NAME" id="HOSID_NAME"
    class="TextBoxRequired" title="你必须从列表中选择一个项目！">
    <option value="">请选择</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>

　　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('<option value="">请选择</option>');
                    // 4.迭代拼接下拉选项
                    $(JOSNdata).each(function(i,item) {
                        $("#HOSID_NAME").append(
                                '<option value="' + item.ORGID + ',' + item.ORGNAME + '">'
                                        + item.ORGNAME + '</option>');
                    });
                });
            });
    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(
                    '<option value="' + item.ORGID + ',' + item.ORGNAME + '">'
                            + item.ORGNAME + '</option>');
        });
    }
);

　　UpdateTime--2017年6月14日17:13:41

　　（六）c标签迭代下拉列表框

　　　　1.通常用于新增页面

　　　　第一部分：HTML

<tr>
    <td class="tdbiejing">科室</td>
    <td>
        <c:if test="${!empty model.data}">
            <select name="FDEPTCODE" class="TextBox" id="FDEPTCODE">
                <c:forEach items="${model.data }" var="dept">
                    <option value="${dept.FDEPTCODE }">${dept.FDEPTNAME }</option>
                </c:forEach>
            </select>
        </c:if>
        <c:if test="${empty model.data}">
            该医疗机构下没有维护科室！
        </c:if>
    </td>
</tr>

　　　　第二部分：JAVASCRIPT

window.onload = function() {
    // id="FDEPTCODE"的标签，如果页面上存在就在下拉框最前面拼接上；若不存在也不会抛异常
    $('#FDEPTCODE').prepend('<option value="">请选择</option>');
　　 document.getElementById('FDEPTCODE').selectedIndex = 0;
};

　　　　2.通常用于修改页面

　　　　第一部分：HTML

<tr>
    <td class="tdbiejing">科室</td>
    <td>
        <c:if test="${!empty model.data2}">
            <select name="FDEPTCODE" class="TextBox" id="FDEPTCODE">
                <c:forEach items="${model.data2 }" var="dept">
                    <option value="${dept.FDEPTCODE }"
                        <c:if test="${model.data[0].FDEPTCODE==dept.FDEPTCODE}">selected</c:if>>
                        ${dept.FDEPTNAME }
                    </option>
                </c:forEach>
            </select>
        </c:if>
        <c:if test="${empty model.data2}">
            该医疗机构下没有维护科室！
        </c:if>
    </td>
</tr>

　　　　第二部分：JAVASCRIPT

window.onload = function() {
    // id="FDEPTCODE"的标签，如果页面上存在就拼接上；若不存在也不会抛异常
    $('#FDEPTCODE').prepend('<option value="">请选择</option>');
}; 

　　实现效果：

　　　　新增页面：如果后台获取的数据不为空，显示下拉框，并添加一个空选项；否则，显示文本提示信息　　　　　　

　　　　修改页面：如果后台获取的数据不为空，显示下拉框，添加一个空选项并设置默认选中项；否则，显示文本提示信息

　　UpdateTime--2017年8月8日10:01:39

　　（七）自定义属性

　　　　HTML部分

选择医生
<select onchange="setPhone(this);" id="DOCID_NAME">
    <option value="">请选择</option>
</select><br/>
联系方式
<input type="text" id="DOCTOR_PHONE"/>

　　　　JAVASCRIPT部分

window.onload = function() {
    // 设置下拉选项标签并为option标签设置自定义属性
    var optionHtml = '<option fdoctorphone="15011111111" value="001,zhangsan">张三</option>';
    // 为下拉框添加选项
    $('#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 = "";
    }
} 

　　　　注意：

　　　　　　a.自定义属性必须全部小写，因为浏览器进行标签解读是会把所有的标签解读成小写；

　　　　　　b.获取选中option标签中的自定义属性，需使用$('#DOCID_NAME option:selected').attr('fdoctorphone')这种方式实现。

小结：

　　select标签绑定onchange事件时，传参this，this虽然代表当前select标签对象，只能通过这个对象获取选中选项的值（sender.value），无法进行其他操作（（三）和（七）作证）;

　　　　　　　　 　　

相关推荐：

• 关于select标签曾经踩过的几个坑！