jQuery - 处理表格单元格中SELECT标记的更改事件

Question

我是jQuery的新手，我在这个表格中有一个单元格中的下拉列表，我不知道如何抓住“更改”的事件＆＃39;为每个人。 我想要的是在更改事件期间每个下拉列表中选择的项目我需要根据选定的下拉列表更新相应的下一个单元格。我已经尝试使用ID来处理每个控件的事件，但是使用这种动态控件我不知道。

我只有一点知识，但没有那么多。

Answer 1

/* Bind Change Event to Select (First) */
$('select.first').on('change', function() {
    /* Set Value to Variable */
    var selectedText = $(this).val();
    
    /* Append Variable as Text to Next <td/> */
    $(this).parents('td').next().text(selectedText);
}).change(); // Run Change on Init

/* Bind Change Event to Select (Second) */
$('select.second').on('change', function() {
    /* Set Value to Variable */
    var selectedText = $(this).val();
    
    /* Append Variable as Text to 2nd <td/> */
    $(this).parents('td').nextAll().eq(1).text(selectedText);
}).change(); // Run Change on Init

/* Bind Change Event to Select (Target Class) */
$('select.targetClass').on('change', function() {
    /* Set Value to Variable */
    var selectedText = $(this).val();
    
    /* Append Variable as Text to <td.targetedClass/> */
    $(this).parents('td').siblings('.targetedClass').text(selectedText);
}).change(); // Run Change on Init

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <td>Select</td>
            <td>First</td>
            <td>Second</td>
            <td>Class</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select class="first">
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td class="targetedClass"></td>
        </tr>
        <tr>
            <td>
                <select class="second">
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td class="targetedClass"></td>
        </tr>
        <tr>
            <td>
                <select class="first">
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td class="targetedClass"></td>
        </tr>
        <tr>
            <td>
                <select class="second">
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td class="targetedClass"></td>
        </tr>
        <tr>
            <td>
                <select class="targetClass">
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td class="targetedClass"></td>
        </tr>
    </tbody>
</table>

Answer 2

您可以尝试以下

$('#table').on('change',  function() {
    var selectedValue = $(this).val();
    var row = $(this).closest('tr'); 
    var nextfield = row.find('.classnamefornextfield'); 
    $(nextfield).html(selectedVal);
}

Answer 3

请尝试以下操作。

$("#id of your select drop down ").change(function () {
        alert($('#id of your drop down option:selected').val());
   $('#id of your input').val($('#id of your drop down option:selected').val());

    });