“select初始化适值为空白,但选择下拉option内却没有空白”的实现

“select初始化时值为空白,但选择下拉option内却没有空白”的实现

       小白一枚,前段时间被这个问题困扰,网上搜了很久,没找到可用的资料,今天突然灵感一来,想到了对这个问题的一个可行办法。总体思路是:在初始化的时候,给select里面构造一个空白的选项,但是在第一次点击的时候,又把这个空白的选项删掉,这样就能使得select选择框在初始化时值为空白,但当点击选择框显示下拉列表时,里面却没有空白的那个选项。

       html如下:

<select name="sender_countyid" id="sender_countyid_id" class="select1" readonly="readonly"  onclick="selectClick(this)" onchange="changeCounty(this)">
         <option value="defaultValue"></option>
         <c:forEach items="${countylist}" var="list">
                 <option value="${list.id}" code="${list.code}">${list.name}</option>
          </c:forEach>

</select>

         js如下:

     /*
     *点击时,删除空表option
     */
    function selectClick(obj){       
        var countySelect;
        countySelect = $("#" + obj.id);
 
        var countyCode = countySelect.val();
        if(countyCode == "defaultValue"){
            var index = obj.selectedIndex;
            obj.options.remove(index);
        }
    }