Javascript 如何使Onchange函数多次工作？

我有一个表单，我有一个按钮，当你点击它时，它会添加一组表单字段。其中一个表单字段是下拉菜单，我有一个功能，当从下拉菜单中选择某个选项时，它会填充另一个表单字段。到目前为止，它适用于页面首次加载时显示的原始表单字段集，但不适用于添加的表单字段集。我如何让它在这两方面都起作用？以下是我的javascript：

<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>

// 

编辑：

我是通过以下方式实现的：

函数更改值（val）
{
如果（val==“JEC”）
$（“form#comform[name='RepeatInfo']”）val（“根据JEC标准”）；
}

---

而不是我以前拥有的。但现在的问题是，当您选择触发选项时，所有“RepeatInfo”表单字段都会填充“Per JEC Standard”，而不仅仅是与触发选择位于同一组表单字段中的字段。如何使此函数适用于添加的表单字段集，而不使单个选择更改填充每个集合中的所有“RepeatInfo”表单字段？

如果要在移动中添加的元素上工作，则必须使用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>

$（文件）。准备好了吗({
$（'#添加'）。单击（函数（）{
var p=$（this）.closest（'p'）；
$（p）.before（“数量和说明：

面料来源：选择面料来源JEC FabricOther面料
款式和名称：
面料宽度：
重复信息：
”）；
返回false；
});
$（“：select”）.live（'change'，function（）{
changevalue（$（this.val（））；
});
函数更改值（val）{
如果（val==“JEC”）document.comform.RepeatInfo.value=“每JEC模式”；
}
});   

我还没有测试它，所以检查关闭

---

K

在动态生成的HTML中，您有以下内容：

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

如果这不起作用，可能有更好的方法来处理它，而不是像这样将其内联。然而，我认为这个答案将是您修复并运行它所需的最少工作量

---

祝你好运

她没有使用jQuery来进行事件处理，它是在她添加的HTML中内联的。这并不意味着她不能使用jQuert进行处理，是的，她必须对新添加的元素使用live（）？因此，我看不出给答案打否定的理由。理论上，这也行，但只需要注意一些语法：第一行的

：select

应该用引号括起来，第二行的

this

应该用jQuery括起来，就像

$（this）

。虽然，您可能不想针对页面上的所有选择框，但使用ID可能会更好。@kwicher我没有投反对票。尽管@Funka已经指出了你答案中的一些基本问题。我之所以发表评论，是因为你说的“如果它要在移动中添加的元素上工作，就必须使用live（）”是不正确的，因为它们是内联语句。live（）当然是一个可能的解决方案，但并没有回答她为什么目前的解决方案不起作用的问题（更不用说@Funka提到的问题了）。我同意我之所以犯了平局错误是因为匆忙。他们现在被纠正了。谢谢你指出它们。

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