1. 程式人生 > >實現 select中指定option選中…

實現 select中指定option選中…

我們在用到下拉列表框select時,需要對選中的

選項觸發事件,其實本身沒有觸發事件方法,我們只有在select裡的onchange方法裡觸發。 當我們觸發select的雙擊事件時,用ondblclick方法。 當我們要取得select的選中事件時,用document.all['name'].value來獲取,其中name是select的名稱。 如果我們要得到select的全部的值就用一個for迴圈來實現。程式碼如下:     var vi = document.all['list'].length;     for(var i=0;i         document.form2.list(i).value; //form2是的名稱     } 下面介紹一個特殊情況的解決,由於option本身沒有事件,所以我們不能給每個option都新增一個onclick事件。如果需要實現點選不同的option,實現不同的函式時,要怎麼辦,從value裡取值在分析是一種辦法,但如果value裡的值不確定,我們又不想從value裡取值怎麼辦呢?可以這樣解決,給每個option新增一個屬性,然後在賦一個值,我們在函式裡取到這個屬性的值就可以判斷執行了。 ---------------------------------------------------------------------------------------------

-------------------------------------------------原始碼------------------------------------

‍‍<select id="pid" onchange="gradeChange()">

    <option grade="1" value="a">選項一</a>

    <option grade="2" value="b">選項二</a>

</select>

<script type="text/javascript">
       function gradeChange(){
        var objS = document.getElementByIdx_x("pid");
        var grade = objS.options[objS.selectedIndex].grade;
        alert(grade);
       }
</script>

================jquery=========

1、獲取選中select的value和text,html程式碼如下:

<</SPAN>select id="mySelect"><</SPAN>option value="1">one<</SPAN>/option><</SPAN>option value="2">two<</SPAN>/option><</SPAN>option value="3">three<</SPAN>/
option><</SPAN>/select>

則可通過以下script程式碼s來獲取選中的value和text

$("#mySelect").val(); //獲取選中記錄的value值 $("#mySelect option:selected").text(); //獲取選中記錄的text值

2、運用new Option("文字","值")方法新增選項option

var obj = document.getElementByIdx_x_x("mySelect");obj.add(new Option("4","4"));

3、刪除所有選項option

var obj = document.getElementByIdx_x_x("mySelect");
obj.options.length
= 0;

4、刪除選中選項option

var obj = document.getElementByIdx_x_x("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);

5、修改選中選項option

var obj = document.getElementByIdx_x_x("mySelect");
var index = obj.selectedIndex;
obj.options[index]
= new Option("three",3); //更改對應的值obj.options[index].selected = true; //保持選中狀態 6、刪除select var obj = document.getElementByIdx_x_x("mySelect");
obj.parentNode.removeChild(obj);
//移除當前物件

7、select選擇的響應事件

$("#mySelect").change(function(){
//新增所需要執行的操作程式碼})