1. 程式人生 > >select的onChange事件問題解決

select的onChange事件問題解決

                select的onChange事件問題解決 (onchange、onfocus、onclick、onmousedown)

一、onChange事件只有在值改變時才可觸發,所以必須在每一次選擇時(尤其第一次)保證選擇的值是改變的!

所以<select name=”inv_payee” id=”ECS_INVPAYEE” onchange=”show_payee();” style=”border:1px solid #ccc;”>
<option value=”個人” selected

>個人</option>  //在這要選定一個預設的值 “selected”

<option value=”單位”>單位</option>
</select>

這樣在選擇第二個時,值就會變即可觸發onChange;

二、我們用Select的onchange事件時,常會遇到這樣一個問題,那就是連續選相同一項時,不觸發onchange事件.select的onchange事件就是這樣子的.你得有Change(改變),才能觸發該事件….
<select name=sel onchange=”bao(this.options[this.options.selectedIndex].value)”>
<option value=”">請選擇
<option value=”1″>Item 1
<option value=”2″>Item 2
<option value=”3″>Item 3
</select>
<script>
function bao(s)
{
txt.value =s;
//選擇後,讓第一項被選中,這樣,就有Change啦.
document.all.sel.options[0].selected=true;
}
</script>
<textarea id=txt></textarea>
三、

js中onchange事件是在客戶端改變輸入控制元件的值,比如一個textbox,會出發的一個事件。但是如果在js程式碼中改變一個textbox的value,而不是通過鍵盤輸入改變一個textbox值的話,是不會出發onchange事件的。

那麼,如何在js程式碼模式通過程式碼觸發textbox控制元件的onchange事件呢,經過查閱資料,發現js提供了一個方法,可以觸發控制元件的應該是 所有事件。object.fireEvent()方法,使用方法如 object.fireEvent(‘onchange’),即可觸發控制元件的onchange事件。

同理,js中使用fireEvent方法還可以觸發其他的空間事件。

觸發onchange事件的問題,並不是值一旦更改就會觸發onchange事件。
對於onBlur和onFocus可以直接呼叫object.Blur()和object.Focus(),但javascript中沒有object.Change
事件。

1.ie 處理1

document.getElementByIdx_x(‘hid_provider_id’).attachEvent(“onpropertychange”,function(){alert(‘gggg’);});

2.object.fireEvent()可以觸發事件,如觸發onchange事件則是object.fireEvent(‘onchange’),以此類推。

例:
<SELECT   id=select1     onchange=”alert(this.value)”>
<OPTION   value=”0″>0</OPTION>
<OPTION   value=”1″>1</OPTION>
<OPTION   value=”2″>2</OPTION>
</SELECT>

<INPUT   type=”text”   id=text1   name=text1>
<INPUT   type=”button”   value=”Button”   onclick=”select1.selectedIndex=text1.value”>
手動改變select的值,會觸發onchange
指令碼改變selectedIndex,不會觸發onchange
解決辦法
if   (select1.fireEvent)
select1.fireEvent(“onchange”)
else
select1.onchange()

<INPUT   type=”button”   value=”Button”   onclick=”select1.selectedIndex=text1.value;
select1.fireEvent(‘onchange’)”>
程式,裡因為程式裡有多個action裡並每個action有多個submit按鈕事件,為了區別程式碼,同時頁面隱藏
按鈕
<select name=”select” onchange=”document.getElementByIdx_x(‘seaoldsubmit’).click();”>
<option value=”0″>查詢條件</option>
……
</select>
<input type=”submit” name=”seaoldsubmit” value=”確定” style=”display:none”>
if(submitcheck(‘seaoldsubmit’))

四、最近專案中遇到一個問題,要用js去觸發onchange事件。
上網找了一些資料,IE上有onpropertychang事件,可以用js去觸發這個事件,但是Firefox不支援這個事件,
然後在firefox中去繫結一個input事件。但是這是無效的啊,仍然不會去觸發onchange事件。
最後只能用未解決方案了!

用js修改值的時候,在js執行修改完之後去執行onchange事件,不過這樣即使這個值不改變的話也會呼叫這個方法。

function handle()
{document.getElementByIdx_x(‘msg’).innerHTML=’輸入的文字長度為:’+document.getElementByIdx_x(‘txt’).value.length;
}
//firefox下檢測狀態改變只能用oninput,且需要用addEventListener來註冊事件。
if(/msie/i.test(navigator.userAgent))    //ie瀏覽器
{document.getElementByIdx_x(‘txt’).onpropertychange=handle
}
else
{//非ie瀏覽器,比如Firefox
document.getElementByIdx_x(‘txt’).addEventListener(“input”,handle,false);
}
</script>
</head>

<body id=”mybody”>
<div id=”msg”></div>
<input id=’txt’ value=”" />

以上為測試程式碼。

五.onfocus實現了任意點選,在資料庫了也只查詢一次

六。onmousedown 單擊一次就查詢一次,所以每選擇一次就查詢一次,增加了資料庫的負擔。每次選擇至少要查詢兩次(一次是在資料庫載入資料,一次是選擇選項時又觸發一次,)

           

再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!希望你也加入到我們人工智慧的隊伍中來!http://www.captainbed.net

這裡寫圖片描述