如何获取通过 JQuery 插入到表行中的下拉框的值/文本

How do I get the value/text of a dropdown box that got inserted into a table row via JQuery

本文关键字：文本 获取 何获取 插入 JQuery      更新时间：2023-09-26

我有一个动态表，用户可以在其中点击"添加"按钮，一旦用户这样做，表中就会有一个新行。这是通过JQuery完成的。

在每个新行中，一列都有一个下拉框（带有预定义的值）。如何获取此下拉框的选定值？下拉框永远不会存在于页面上，除非通过 JQuery 添加。

我想根据保管箱的值更改下一列的值。例如，如果用户选择下拉框，则下一列中将出现一个下拉框

为了测试JavaScript/JQuery是否正常工作等，一旦点击"添加"按钮，我就会显示一条愚蠢的警报消息。这很成功。

一旦下拉框的值发生变化等，我尝试显示另一条消息，但我没有成功。

我想我的问题是，除非动态创建，否则我能否获得 DOM 上不存在的元素的值。

任何帮助将不胜感激。

谢谢。

我的网页： 

<div id="etDiv">
    <table style="width:100%" border="dotted" class="createElementTable" id="table">
        <caption>
            <!-- To do -->
            <tr class="tableText">
                <th class="tableText">Required</th>
                <th class="tableText">Label</th>
                <th class="tableText">Type</th>
                <th class="tableText">Values</th>
                <th class="tableText">Decrease/Increase</th>
            </tr>
    </table>
</div>

我的 JQuery： 

$('#addButton').click(function () {
    count = count + 1;
    alert("Element: " + count + " added.");
    $required = "<input type='checkbox' name='check'>";
    $label = "<input type='text' placeholder='Enter your label'>    </input>";
    $type = "<SELECT name='type' onchange='typeCheck(this)'>    <>Type</option><OPTION value='header'>Header</option><OPTION     value='hr'>HR</option><OPTION value='textbox'>Text Box</option><OPTION     value='datefield'>Date Field</option><OPTION     value='person'>Person</option><OPTION value='dropdownbox'>Dropdown     Box</option><OPTION value='image'>Image</option><OPTION     value='checkboxgroup'>Checkbox Group</option><OPTION     value='radiogroup'>Radio Group</option><option>" + count + "</option>    </select>";
    $values = "To Do";
    $capacity = "To Do";
    $element = "<tr class='child'> <td>" + $required + "</td>     <td>" + $label + "</td> + <td>" + $type + "</td> <td>" + $values + "</td>     <td>" + $capacity + "</td>";
    $('#table tr:last').after($element);
});

我希望得到$type的价值。

摆脱onchange='typeCheck(this)'并使用 jQuery .on()函数的事件委托语法：

$('table').on('change', 'select[name="type"]', function(){
    console.log($(this).val())
})

document.getElementById（this）.value

相关文章：