下拉列表框select

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

Author:Marydon

三、下拉列表框

　　（一）语法

　　（二）<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），无法进行其他操作（（三）和（七）作证）;