【JavaScript】下拉選單select中在value傳遞多個值,取出其option顯示值,並應用此作為導航

【JavaScript】下拉選單select中在value傳遞多個值,取出其option顯示值,並應用此作為導航

對於下拉選單select,眾所周知,其值就是選中的option中的value值,可是如果需要取出每一個option的顯示值,那又如何做呢?雖然沒什麼必要取出option的顯示值,但是如果有時候確實需要這個顯示值,在javascript的指令碼做點什麼呢?另外,如果要再value處傳遞多個值呢?那又改如何呢?

一、取出option的顯示值

你可以先傳遞整個select過去指令碼,假設傳過去的形式引數是obj,然後利用obj.options[obj.selectedIndex].innerHTML來取出option的顯示值

obj.selectedIndex表示現在select中被選中的option的位置

你可以換成0,1,2,3……表示第0,1,2,3……項

二、下拉選單select中在value傳遞多個值

此時則需要在指令碼中利用到split函式,在value中設定好分隔符,

split返回的是一個陣列,

再遍歷此陣列,取出傳遞過去的value值。

舉個例子,說明上面兩個項,比如如下程式碼:

HTML佈局:

<select onchange="selectTest(this)">
<option value="你好,1,2">你好</option>
<option value="aaa,2,3">aaa</option>
<option value="中文沒有問,4,5" >中文沒有問題</option>
<option value="cc,c,c">aaa</option>
</select>

JavaScript指令碼:

function selectTest(obj){
alert("Option中的中文:" obj.options[obj.selectedIndex].innerHTML);
paramArray=obj.value.split(",");
a=paramArray[0];
b=paramArray[1];
c=paramArray[2];
alert(a "" b c);
}

執行結果如下:

可以看到,每當下拉選單的值改變,也就是使用者選擇其中一項,那麼就會觸發指令碼,指令碼首先彈出option的顯示值,再彈出value中各個數值,

三、下拉選單select導航欄

如上圖所示。其實利用下列選單select的onchange函式還可以做一些導航欄,在value中放一個地址,在指令碼放是一個window.location.href函式,設定onchange觸發,則可以完成,比如如下程式碼:

HTML佈局:

<select onchange="selectHref(this)">
<option value="http://www.1.com">1</option>
<option value="http://www.2.com">2</option>
<option value="http://www.3.com">3</option>
<option value="http://www.4.com">4</option>
</select>
<select onchange="selectHref(this)">
<option value="http://www.5.com">5</option>
<option value="http://www.6.com">6</option>
<option value="http://www.7.com" >7</option>
<option value="http://www.8.com">8</option>
</select>

JavaScript指令碼:

function selectHref(obj){
window.location.href=obj.value "";
}

舊式的很多IE6網頁就是利用這個完成導航欄的,這樣實現,比《【CSS】黑色幽默,相容IE6的純原生態的入口網站》(點選開啟連結)提到的導航欄簡單多,當然更是要比BootStrap好寫,兼用性強。可能會有人覺得太醜,但是下拉選單那個下三角形樣式是系統瀏覽器固定的,無法用CSS修改,我在《【CSS】扁平化都是紙老虎,看怎麼拋棄前端框架在IE6扁平化》(點選開啟連結)中已經提到過了。程式碼簡單與網頁華麗兩者不可以相容,如何寫出既性感又豐滿的程式碼,是我們程式猿一直的追求……