下拉列表框select

時間  2019-11-20
標籤 下拉 列表 select 简体版
原文   原文鏈接

下拉列表框select

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

Author:Marydon

3、下拉列表框html

　　（一）語法jquery

　　　　<select></select>web

　　（二）<option>標籤的value屬性express

　　說明：<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控制下拉框的默認選中項app

　　　　1.重置下拉列表框ui

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

　　　　實現：this

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

　　　　注：這裏只介紹了第一種實現方式，更多實現方式見文章-js&jquery實現方式對比彙總。編碼

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

　　　　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），沒法進行其餘操做（（三）和（七）做證）;

　　　　　　　　 　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程