Question

我有一个表单，我有一个按钮，当你点击它时会添加一组表单字段。其中一个表单字段是下拉菜单，我有一个函数，以便当从下拉菜单中选择某个选项时，它会填充另一个表单字段。到目前为止，它适用于页面首次加载时显示的原始表单字段集，但它不适用于添加的表单字段集。我如何让它在两者上工作？这是我的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>

编辑：

我用它来工作： function changevalue(val) { if(val=="JEC") $("form#comform [name='RepeatInfo']").val("Per JEC Standard"); } 而不是我以前的。但现在的问题是，当您选择触发选项时，所有“RepeatInfo”表单字段都会填充“Per JEC Standard”，而不仅仅是触发选择的同一组表单字段中的那个。如何让这个函数适用于添加的表单字段集，但没有一个选择更改填充每个集合中的所有“RepeatInfo”表单字段？

Answer 1

在动态生成的HTML中，您有：

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

但是select元素上没有value属性。您需要检查selectedIndex，或者也可以使用jQuery val方法。

您可以尝试这样做：

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

如果这不起作用，可能有更好的方法来处理它，而不是像这样把它内联。但是，我认为这个答案对你来说是最少量的工作来解决并让它运行起来。

祝你好运！

Answer 2

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

我还没有测试过，所以请检查一下。

ķ

如何使我的Onchange功能不止一次工作？

2 个答案: