javascript - 无法更改选择更改时的输入值

Question

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

此代码是由触发 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 -->

因此，当触发 cambiarUnidades(this.value) 时，我想更改 postArrayUnidades[]

JS:

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

我已经尝试了所有这些，但不起作用，我无法更改输入值:(请帮忙!

Answer 1

fiddle :

http://jsfiddle.net/gM2vX/2/

html:

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

jquery:

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

});

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