如何讓我的Onchange函數不止一次地工作？

我有一個窗體，我有一個按鈕，當你點擊它時會添加一組表單域。其中一個表單域是一個下拉菜單，我有一個功能，當從下拉菜單中選擇某個選項時，它將填充另一個表單域。到目前爲止，它適用於頁面第一次加載時顯示的原始表單字段集合，但不適用於添加的一組表單字段。我如何使它在兩者上都能工作？下面是我的javascript：如何讓我的Onchange函數不止一次地工作？

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'> 
</script><script type='text/javascript'> 
//<![CDATA[ 
    $(function() { 
    $('#add').click(function() { 
     var p = $(this).closest('p'); 

     $(p).before('<p> <b>Quantity & Description:<\/b><br><textarea name="QuantityAndDescription" rows="10" cols="60"><\/textarea><br><b>Fabric Source:<\/b> <select name="FabricSource" onchange="changevalue(this.value)"><option value="">Select Fabric Source<\/option><option value="JEC">JEC Fabric<\/option><option value="Other">Other Fabric<\/option></select><br><b>Style# & Name:<\/b> <input type="text" name="Style#andName"><br><b>Fabric Width:<\/b> <input type="text" name="FabricWidth"><br><b>Repeat Information:<\/b> <input type="text" name="RepeatInfo" size="60"><input type="hidden" name="COM Required" /> <\/p><br>'); 
     return false; 
    }); 
}); 

function changevalue(val) { 
    if (val == "JEC") document.comform.RepeatInfo.value = "Per JEC Pattern"; 
} 
//]]> 
</script>

編輯：

我用它來工作： function changevalue(val) { if(val=="JEC") $("form#comform [name='RepeatInfo']").val("Per JEC Standard"); } 什麼，而不是我以前。但現在的問題是，當您選擇觸發選項時，所有「RepeatInfo」表單字段將填充「Per JEC Standard」，而不僅僅是與觸發選擇相同的一組表單字段中的一個。我怎樣才能讓這個函數爲添加的表單域設置工作，但沒有一個單獨的選擇更改填充每個集合中的所有「RepeatInfo」表單域？

來源

2011-06-09 Alice

-1

如果要在移動中添加的元素上工作，則必須使用live（）方法。

所以要更具體。

如果您已經使用jQuery處理click事件，那麼也可以使用它來處理更改。例如，像這樣：

<script type='text/javascript'> 

$(document).ready({ 
    $('#add').click(function() { 
    var p = $(this).closest('p'); 

    $(p).before('<p> <b>Quantity & Description:<\/b><br><textarea name="QuantityAndDescription" rows="10" cols="60"><\/textarea><br><b>Fabric Source:<\/b> <select name="FabricSource"><option value="">Select Fabric Source<\/option><option value="JEC">JEC Fabric<\/option><option value="Other">Other Fabric<\/option></select><br><b>Style# & Name:<\/b> <input type="text" name="Style#andName"><br><b>Fabric Width:<\/b> <input type="text" name="FabricWidth"><br><b>Repeat Information:<\/b> <input type="text" name="RepeatInfo" size="60"><input type="hidden" name="COM Required" /> <\/p><br>'); 
    return false; 
    }); 

    $(":select").live('change', function(){ 
     changevalue($(this).val()); 
    }); 
    function changevalue(val) { 
    if (val == "JEC") document.comform.RepeatInfo.value = "Per JEC Pattern"; 
    } 
}); 
</script>

我還沒有測試過，所以檢查關閉。

來源

2011-06-09 17:42:09 kwicher

她沒有使用jQuery來執行事件處理，而是在她添加的HTML中內聯。 – Matt 2011-06-09 17:58:02

這並不意味着她不能使用jQuert，是的，她將不得不使用live（）來添加新元素？因此我不認爲給答案給出否定的理由。 – kwicher 2011-06-10 00:32:52

從理論上講，這也是可行的，但只是關於某些語法的說明：第一行中的'：select'應該用引號括起來，而第二行中的'this'應該用jQuery來包裝，像'$ （本）'。雖然，可能你不想在頁面上選擇所有的選擇框，所以使用ID可能會更好。 – Funka 2011-06-10 00:51:31

在您的動態生成HTML，你有這樣的：

<select name="FabricSource" onchange="changevalue(this.value)">

但沒有value屬性選擇元素。您需要檢查selectedIndex，或者也可以使用jQuery val方法。

你可以代替試試這個：

<select name="FabricSource" onchange="changevalue($(this).val())">

如果不起作用，可能有更好的方法來處理這個問題，而不是把它內聯這樣的。不過，我認爲這個答案對於您來說是解決問題的最小工作量，並且可以讓它運行起來。

祝你好運！

來源

2011-06-10 00:49:46 Funka

對不起，它似乎沒有工作。 – Alice 2011-06-10 16:18:28

如何讓我的Onchange函數不止一次地工作？

回答

相關問題