Javascript 无法在选择更改时更改输入值

我一直在尝试在下一个td中更新输入值，但没有成功

此代码由“new item”按钮创建，该按钮触发javascript：

<tr class="item1"><!-- contenido de tabla -->
    <td>
        <select name="postArrayProducto[]">
        <option>Suave</option>
            <option>Fuerte</option>
        <option>Merken</option>
        </select>
    </td>
    <td>
        <select name="postArrayFormato[]" onchange="cambiarUnidades(this.value)">
             <option value="frascoG">Frasco 370g</option>
         <option value="frascoC">Frasco 220g</option>
         <option value="sachet">Sachet 200g</option>
         <option value="doypack">Doy/Pack 250g</option>
        </select>
    </td>
    <td>
        <input type="text" name="postArrayUnidades[]" size="1" maxlength="3" readonly value="20"> unidades
    </td>
    <td>
        <input type="text" name="postArrayCajas[]" size="1" maxlength="3"> cajas
    </td>
</tr><!-- fin contenido tabla -->

---

我已经尝试了所有这些，但都不起作用，我无法更改输入值：（请帮助！

小提琴：

<script type="text/javascript">
    $(window).load(function(){
        cambiarUnidades = function(el) {
            if(el == "frascoG"){
                $(el).parents('td').next('td').find('input').val('99');         
            }
            if(el == "frascoC"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').val('99');             
            }
            if(el == "sachet"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').value='99';  
            }
            if(el == "doypack"){
                $(el).parent().next('td').find('input').val('99'); 
            }      
        }
    });
</script>

<table>
    <tr class="item1"><!-- contenido de tabla -->
        <td>
            <select name="postArrayProducto[]">
                <option>Suave</option>
                <option>Fuerte</option>
                <option>Merken</option>
            </select>
        </td>
        <td>
            <select name="postArrayFormato[]" id="test">
                <option value="frascoG">Frasco 370g</option>
                <option value="frascoC">Frasco 220g</option>
                <option value="sachet">Sachet 200g</option>
                <option value="doypack">Doy/Pack 250g</option>
            </select>
        </td>
        <td>
            <input type="text" name="postArrayUnidades[]" size="1" maxlength="3" readonly value="20"/> unidades
        </td>
        <td>
            <input type="text" name="postArrayCajas[]" size="1" maxlength="3"> cajas
        </td>
    </tr>
</table><!-- fin contenido tabla -->

$(function(){
    $("body").on("change","#test",function(){
        $(this).parent().next().find("input").val("99");
   });

html:

<script type="text/javascript">
    $(window).load(function(){
        cambiarUnidades = function(el) {
            if(el == "frascoG"){
                $(el).parents('td').next('td').find('input').val('99');         
            }
            if(el == "frascoC"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').val('99');             
            }
            if(el == "sachet"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').value='99';  
            }
            if(el == "doypack"){
                $(el).parent().next('td').find('input').val('99'); 
            }      
        }
    });
</script>

<table>
    <tr class="item1"><!-- contenido de tabla -->
        <td>
            <select name="postArrayProducto[]">
                <option>Suave</option>
                <option>Fuerte</option>
                <option>Merken</option>
            </select>
        </td>
        <td>
            <select name="postArrayFormato[]" id="test">
                <option value="frascoG">Frasco 370g</option>
                <option value="frascoC">Frasco 220g</option>
                <option value="sachet">Sachet 200g</option>
                <option value="doypack">Doy/Pack 250g</option>
            </select>
        </td>
        <td>
            <input type="text" name="postArrayUnidades[]" size="1" maxlength="3" readonly value="20"/> unidades
        </td>
        <td>
            <input type="text" name="postArrayCajas[]" size="1" maxlength="3"> cajas
        </td>
    </tr>
</table><!-- fin contenido tabla -->

$(function(){
    $("body").on("change","#test",function(){
        $(this).parent().next().find("input").val("99");
   });

}))

---

您可以使用一些不通过ajax动态加载的div，而不是body。它提高了性能。它不会从文档级别搜索元素，而是从指定的元素中进行检查，就像我（body）一样。

您将select的值传递给函数（onchange=“cambiarUnidades（this.value）”），这样您就不能使用$（el.parents（'td'）。。。。因为el是值，而不是对象

所以首先你应该把onchange改成cambiarUnidades（这个）

然后您必须使用$（el）.val（）==。。。在if语句中

其次，parent（'tr'）是不对的，因为parent（）不会上升两级，所以应该使用parents（'tr'）

所以有一行是这样的：

if ($(el).val() == "frascoC") {  
  $(el).parents('tr').find('td:nth-child(3)').find('input').val('99');             
}

还有一件事，您应该将TR元素包装在一个表中以使其工作

---

（显然还有其他解决方案，我试图指出代码的错误部分，而不是编写另一个解决方案）

好的解决方案--它消除了内联javascript，删除+1总是好的。在回答这个问题时，我发现jquery有一个奇怪的地方。如果你想知道的话，请点击这个链接。实际上，这是浏览器智能在找不到表标记时删除了tr标记：）我明白了，我的代码中确实有表标记，只是想向你展示创建的代码部分dynamically@susheel那很有趣。非常感谢。