📌  相关文章
📜  如何在 jquery 中获取动态创建的下拉列表的选定值 - Javascript (1)

📅  最后修改于: 2023-12-03 14:52:22.201000             🧑  作者: Mango

如何在 jQuery 中获取动态创建的下拉列表的选定值

当使用 jQuery 动态创建一个下拉列表时,你可能会想要获取用户选择的值。这可以通过使用 jQuery 事件处理程序来实现。以下是一些实现方法:

// HTML 中的下拉列表示例
<select id="myDropdown"></select>

// 动态创建下拉列表的选项
var dropdownOptions = [
    { text: "选项 1", value: "1" },
    { text: "选项 2", value: "2" },
    { text: "选项 3", value: "3" }
];

// 使用 jQuery 动态创建选项并将其添加到下拉列表中
$.each(dropdownOptions, function(index, option) {
    $('#myDropdown').append($('<option></option>').attr('value', option.value).text(option.text));
});

// 添加事件处理程序以获取选中项的值
$('#myDropdown').change(function() {
    var selectedValue = $(this).val();
    console.log(selectedValue);
});

上述代码首先创建了一个空的 <select> 元素,并指定其 id 为 "myDropdown"。然后,使用 JavaScript 数组创建了一个包含所需选项的对象数组 dropdownOptions。接下来,使用 $.each 方法遍历 dropdownOptions 数组,并通过 append 方法动态创建每个选项并将其添加到 <select> 中。

最后,通过 change 事件处理程序监听下拉列表的改变事件,并在事件处理程序中使用 val 方法获取选中项的值,并将其打印到控制台中。

你可以将上述代码添加到你的 HTML 页面中,并在下拉列表中选择选项时,在浏览器的开发者工具中查看选中值。

确保在使用此代码之前引入 jQuery 库。

希望这对你有帮助!