select標籤的使用心得

a.關於html頁面寫死的select標籤，載入頁面時更換值的問題

      <select name="incomeTypes" id="incomeTypes" class="select02" style="width: 150px;">
          <option value="01" selected="selected">租賃收入</option>
          <option value="02">利息收入</option>
          <option value="00">其它業務收入</option>
      </select>

     <input type="text" id="incomeType" name="incomeType" value="${incomeType}"/>

    關於此處select標籤的使用，當它載入頁面時，默認爲租賃收入選項。那麼當保存該信息後，重新載入頁面時，後臺會將我們需要的收入種類的值傳入id爲incomeType的input域中。此時，上方select標籤顯示的值如何動態變化呢

    

    var incomeType = document.getElementById('incomeType').value;/$('#incomeType').val();
    var incomeTypes = document.getElementById('incomeTypes');/$('#incomeTypes');

    這裏的標籤無所謂使用哪一種寫法，目的是相同的，就是分別獲取那個隱藏域incomeType 和ID爲incomeTypes的select標籤的object對象。此時，遍歷該對象，當其中的某個值與隱藏域中的取值相同時，則設置其爲被選中，即.selected=true;
    for(var j = 0; j < incomeTypes.length; j++){
        if(incomeTypes[j].value == incomeType){
            incomeTypes[j].selected = true;
        }
    }

至此，效果實現。

 

b.獲取select標籤下選中的值

沿用上面的代碼： var incomeTypes = document.getElementById('incomeTypes');/$('#incomeTypes');

JS：

var index = incomeTypes.selectedIndex；// 選中索引
var text = incomeTypes.options[index].text； // 選中文本
var value = incomeTypes.options[index].value；// 選中值

JQUERY：

第一種方式
$('#incomeTypes option:selected').text()；
$('#incomeTypes option:selected').val()；
$("#incomeTypes").get(0).selectedIndex；
第二種方式
$("#incomeTypes").find("option:selected").text()；
$("#incomeTypes").find("option:selected").val()；
$("#incomeTypes").find("option:selected").get(0).selectedIndex；

 

如果select標籤不含有任何可供定位的屬性，如
<select></select>
則用下述方法獲取當前選項的值：
var v = document.getElementsByTagName("select")[0].value;
如果同一頁面含有多個select標籤，則上述[0]中的數字要改爲相應的物理順序號（從0起算）

 

a實例中的代碼，獲取當前選擇的方式也可以採用如下形式：

<select name="incomeTypes" id="incomeTypes" class="select02" style="width: 150px;">
          <option value="01" selected="selected">租賃收入</option>
          <option value="02">利息收入</option>
          <option value="00">其它業務收入</option>
</select>
一：javascript原生的方法
1:拿到select對象： var incomeTypes=document.getElementById("incomeTypes")；
2:拿到選中項的索引：var index=incomeTypes.selectedIndex；
3:拿到選中項options的value： incomeTypes.options[index].value；
4:拿到選中項options的text： incomeTypes.options[index].text；
二：jquery方法（前提是已經加載了jquery庫）
1.獲取選中的項
var options=$("#incomeTypes option:selected")；
2:拿到選中項的值
options.val()；
3:拿到選中項的文本
options.text()；