Question

我有一个动态表，其中的select选项具有多个属性。我要做的是将这些多个属性填充到select元素旁边同一行中的相邻单元格中。select元素位于动态行的第一个单元格中。

<!DOCTYPE html>
    <html>
        <td>
            <select name="savings_account_number[]" id="savings_account_number" class="form-control">
                <option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
                <option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
            </select>
        </td>
        <td>
            <input name="pro_id[]" id="pro_id"/>
        </td>
        <td>
            <input name="available_bal[]" id="pro_id"/>
        </td>
        <td>
            <input name="cap_gl[]" id="cap_gl"/>
        </td>
        <td>
            <input name="account_number[]" id="account_number"/>
        </td>
    </html>

我希望在onchange活动中发生这种情况

Answer 1

如果正确理解，这可能是使用jQuery的解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
    <td>
        <select name="savings_account_number[]" class="form-control">
        <option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
        <option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
        </select>
    </td>
    <td>
        <input name="pro_id[]" id="pro_id"/>
    </td>
    <td>
        <input name="available_bal[]" id="available_bal"/>
    </td>
    <td>
        <input name="cap_gl[]" id="cap_gl"/>
    </td>
    <td>
        <input name="account_number[]" id="account_number"/>
    </td>
    </tr>
    <tr>
    <td>
        <select name="savings_account_number[]" class="form-control">
        <option value="1245" pro_id="5" available_bal="454" cap_gl="3659" account_number="65987">1245</option>
        <option value="6598" pro_id="43" available_bal="3215" cap_gl="64545" account_number="645444">6598</option>
        </select>
    </td>
    <td>
        <input name="pro_id[]" id="pro_id"/>
    </td>
    <td>
        <input name="available_bal[]" id="available_bal"/>
    </td>
    <td>
        <input name="cap_gl[]" id="cap_gl"/>
    </td>
    <td>
        <input name="account_number[]" id="account_number"/>
    </td>
    </tr>
<tbody>
</table>

<script>
$(document).ready(function(){
    $("table select").change(function(){
    var select = $(this);
    var option = select.find("option[value=" + select.val() + "]");
    var tr = select.parents("tr:first");
    if(option.length > 0){
      tr.find("#pro_id").val(option.attr("pro_id"));
      tr.find("#available_bal").val(option.attr("available_bal"));
      tr.find("#cap_gl").val(option.attr("cap_gl"));
      tr.find("#account_number").val(option.attr("account_number"));
    }
    else{
      tr.find("#pro_id").val("");
      tr.find("#available_bal").val("");
      tr.find("#cap_gl").val("");
      tr.find("#account_number").val("");
    }
    }).change();
});
</script>

请注意，我已经更正了第二个输入的id，该标识符具有与第一个相同的标识符。另外，会显式提高选择更改事件处理程序以在加载时加载当前值。

js用选择选项中的属性更新动态表字段

1 个答案: