JQuery - 如何将change()函数绑定到动态创建的<select>？
JQuery是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果等操作。在动态创建的<select>元素上绑定change()函数可以通过以下步骤实现：
- 使用JQuery的append()或者appendTo()方法动态创建<select>元素，并设置其id或class属性，例如：var select = $('<select>').attr('id', 'mySelect');
- 使用JQuery的on()方法来绑定change事件，该方法可以处理动态创建的元素。通过选择器选择动态创建的<select>元素，并指定事件处理函数，例如：$(document).on('change', '#mySelect', function() { // 在这里编写change事件的处理逻辑 });这里使用了document作为事件委托的容器，以确保能够捕获到动态创建的<select>元素的change事件。'#mySelect'是选择器，用于指定要绑定change事件的动态创建的<select>元素。
- 在事件处理函数中编写change事件的逻辑，例如：$(document).on('change', '#mySelect', function() { var selectedValue = $(this).val(); console.log('选中的值是：' + selectedValue); });在这个例子中，通过$(this)获取到当前触发change事件的<select>元素，使用val()方法获取选中的值，并进行相应的处理。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。
相关·内容
我使用jQuery动态创建select元素的选项。是否可以在jQuery中设置要在选择该选项时执行的函数？
我知道我可以检测到整个select元素的变化，但是否可以在每个选项的基础上指定这一点？可能是这样的：
$('<option />').onselect(function(){
// do something
});
编辑:如果不能指定在选择特定选项时执行get的函数，是否可以将函数绑定到jQuery中的元素？它将使我逻辑更清晰，只需执行分配给select的.change中的选项的函数即可。
浏览 2提问于2012-03-12得票数 7
回答已采纳
2回答
每当单击复选框时，我都会尝试从div中添加或删除html，并且我已经将其用于某些复选框，但不是所有的复选框。
一些复选框最初在页面加载时出现，而另一些复选框则是动态添加的。原始页面加载时存在的复选框正确地完成了他们应该做的事情，但是那些动态添加的复选框并没有被.change()在jQuery调用中选择。
我已经在代码中放置了一个警报()，它应该对复选框进行任何更改，并且它只对原始复选框执行，但我还有checkAll和uncheckAll javascript函数，它们成功地完成了对所有复选框应该做的事情。
下面是从html区域的Firebug检查元素中获取的代码片段，其中显示了有关复选框：
&
浏览 2提问于2014-01-09得票数 0
回答已采纳
2回答
我有一些使用perl动态生成的Select/Option html代码。我使用JQuery在下面的div中显示每个选项的值。我的问题是，如何将JQuery选择范围缩小到每个选择标记？按照我现在的方式，它会选择所有的标签。
function changeDesc() {
var selectionValue = $('.RandomDiv > fieldset > legend > select').val();
$('.RandomDiv > fieldset > div').html(selectionValue);
}
浏览 0提问于2012-02-01得票数 0
2回答
我已经在jquery函数中动态创建了select标签。我想将鼠标事件绑定到它。我已经动态创建了selct标签
function loadValues()
{
var sel='<select id="flavor_slct'+index+'" class="popper" data-popbox="pop1"
onclick="alert()">'+flavor_fetched_string+'</select>';
$("#attach&
浏览 3提问于2015-08-05得票数 0
2回答
我正在一个电子商务网站上工作，这些产品是用foreach循环动态生成的，在每个产品中都有产品选项，当选择产品选项时，我的预期行为是价格更新。
但是，jQuery正在更新页面上价格的每个实例，select选项只适用于生成的第一个项目。如何将jQuery添加/绑定到对象/每个产品，并根据每个产品的价格变化？
<?php
foreach($items as $item):
<?php echo $the_name ?>
<select id="choose">
foreach($selection as $select
浏览 4提问于2014-01-26得票数 1
回答已采纳
3回答
我是jQuery和javascript的新手。在我的应用程序中，我有一个用户列表。当从列表中单击某个特定用户时，div元素将动态替换为有关该用户的详细信息。当单击另一个用户时，我再次用这个用户详细信息替换相同的div元素。因此，一次只能看到一个用户的详细信息。
我使用jquery，所以上面描述的代码看起来像这样。
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){
`$('div.user_info').
浏览 2提问于2010-01-31得票数 2
回答已采纳
我正在动态添加select元素，如下面的HTML所示。我不确定为什么.on('change‘...)不适用于动态选择。我遗漏了什么？
我使用的是Chrome 24.0.1312.57 + jquery 1.8.3。
<script type="text/javascript">
$(document).ready(function() {
$('#x select').on('change', function () { alert('helo'); })
$('#y sel
浏览 0提问于2013-02-19得票数 22
回答已采纳
我正在使用Zurb Foundation框架，并有一个选择元素，其中框架为自定义选择元素(自定义下拉列表)注入HTML。
<select id="caseModule" style="display: none;">
<option value="gifting">Gifting</option>
<option value="other">Other</option>
</select>
<div class="custom dropd
浏览 3提问于2013-02-16得票数 6
2回答
我想要添加事件动态创建选定的选择，并希望获得选项值。但是混淆了如何在动态创建的选定的select上触发事件.？
我知道我们可以使用jquery.live or jquery.on event，但是为此我们需要正确的选择器/id
$(document).on( eventName, selector, function(){} );
我的小提琴：
html：
<select id="t1pl1" class="chosen-select" data-placeholder="Select player..." style="width
浏览 3提问于2014-06-25得票数 1
回答已采纳
我目前在一个页面上有多个select，这些select是使用jquery通过ajax调用动态添加的。
我遇到的问题是，除非我在标记内使用onchange，否则我无法让change事件在添加的select上工作。
<select id="Size" size="1" onchange="onChange(this);">
这是可行的，但我想知道有没有办法让它被jquery赋值。我曾尝试在$(document).ready的常用位置使用$('select').change(onChange($(this));，但不起作用。
浏览 1提问于2008-09-22得票数 4
回答已采纳
<asp:DropDownList runat="server" id="DropDownList1"
DataSourceID="spdatasource1" DataValueField="CategoryName"
AutoPostBack="false">
</asp:DropDownList>
此asp.net dropdonwlist控件呈现以下html。它被数据绑定到sharepoint列表。下拉选项是动态填充的。我正在尝试操作一个选项的onselec
浏览 1提问于2012-01-06得票数 0
这就是当前页面的样子：
第一个是硬编码的，然后其余的由按钮添加/删除。第一个也可以从按钮中添加和删除。当下拉列表更改为更改textbox/radiobutton (和text)、/checkbox(和text)等类型时，我想调用jquery函数。
目前，它只适用于第一个问题/答案，并且只有当它是原始的而不是动态创建的时候才能工作。我不知道为什么。
下面是Q/A的创建和删除方式
$("#addButton").click(function () {
if (counter > max_fields) {
alert("Only &
浏览 3提问于2016-12-14得票数 0
回答已采纳
2回答
我在代码中使用jquery的change()方法。
$("select,input,textarea").change(function ()
{
needToConfirm = true;
alert("needToConfirm :" + needToConfirm);
})
它与所有select、input以及textarea元素都很好地工作，除了后面的textarea元素
<textarea name="myTextArea" id="myTextArea" c
浏览 5提问于2011-05-23得票数 2
回答已采纳
1回答
我使用jquery动态创建select元素，并希望在发生更改事件时执行操作。也就是说，当用户从上一个选择框中选择选项时，我想填充另一个选择框。代码无法工作，因为第一个选择框是(完全)动态创建的(而不仅仅是动态填充的)。我试图使静态选择框和动态填充它，当用户从这个组合框中选择选项时，我填充另一个组合box.this代码正常工作。但在我的例子中，我必须动态创建select元素。我知道这个问题，但我不知道如何解决它。我写了这段代码：
$(document).ready(function(){
$("a.package").click(function(){
var
浏览 0提问于2011-07-19得票数 0
回答已采纳
我有三个依赖的选择。首先，要有一些价值观。
<select id="first">
<option value="1">v1</option>
<option value="2">v2</option>
</select>
第二个和第三个为空：
<select id="second"></select>
<select id="third"></select>
我想通过ajax请求填充空白sele
浏览 0提问于2010-08-19得票数 4
回答已采纳
使用jQuery，如何在单击选择框时动态加载选择框选项。
我正在使用redmine来动态地加载问题类别以选择复选框。
如何将事件处理程序附加到选择框。
但这不起作用，即事件不附加
<script>
//dynamically load status values
$('#newstatusField').on('click',function(){
alert('inside');
});
</script>
<select name="status"
浏览 3提问于2014-05-30得票数 0
回答已采纳
我希望在JS函数中使用传递的参数(this)，并将其视为jQuery变量。示例：
<script>
function useMe(obj){
$(obj).val();
...
...
...
}
</script>
<select id="selectid" onChange="useMe(this)">
<option>......</option>
</select>
是否可以将传递的参数视为jQuery元素？
顺便说一句。我需要这样做，因为sel
浏览 0提问于2010-05-18得票数 0
回答已采纳
我正在使用Angular 4，我正在创建一个页面，用户可以在其中创建一个由哈希、序列和常量值组成的格式。用户可以按任何顺序添加它们，因此为此，我将使用FormArray动态地创建它们
HTML代码是：
<div formArrayName="components"
*ngFor="let c of components.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group row"&g
浏览 0提问于2018-10-05得票数 1
回答已采纳
jQuery('body').on('click', 'select', function(e){
var form = jQuery(this).form();
var select_elt = jQuery(this);
var option_elt = jQuery(select_elt).find('option');
$(option_elt).on('change', function (e) {
form.trigger('submit
浏览 0提问于2017-04-27得票数 0
4回答
我有一个下拉列表，它是生成动态的
下面是生成的下拉列表的代码片段
<select class='selectAggregate'>
<option>Select</option>
<option>Min</option>
<option>All</option>
</select>
如何使用JQuery获得选择选项
编辑我添加了我使用的jquery代码
$('.selectAggregate').each(function()
{
浏览 8提问于2015-10-20得票数 1
3回答
我正在用jQuery构建一些动态选择列表。当它们被更改时，我希望事件触发一个函数来获得数据刷新。
var selector = $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list
selector.bind('change', doUpdate(this));
我的问题是每次构
浏览 2提问于2013-01-25得票数 0
回答已采纳
1回答
如何将类添加到从HTML <option>选择的HTML <select>中，例如，如果标记是
<select>
<option>value 1</option>
<option>value 2</option>
</select>
我使用了以下jQuery代码：
$('option').click(function(){
$(this).addClass('demo');
})
还尝试了change事件。然而，这两种方法似乎都失败了。感谢你的帮助
浏览 1提问于2015-09-17得票数 0
我有一个表单，用户可以在其中动态添加字段(克隆和增加索引)。我用来做这件事。你不需要钻研这个插件就能回答这个问题。
it --这个附加字段(将被克隆并增加索引)--我有一个select元素，它提醒元素的id (实际上，它根据输入填充不同的字段，但为了更好的说明，它提供了方便)。这个函数的代码非常简单，在最后找到。
问题是，如果用户添加额外的字段(1.)，jquery函数中的"change“事件不会绑定到新创建的字段。所以(2.)不适用于新的字段。
如果我使用Javascript并将onchange事件添加到html中，这是可行的。
我如何使用jquery来做到这一点呢
浏览 2提问于2011-10-10得票数 1
回答已采纳
我有一个使用jQuery 1.3的Drupal站点，所以不幸的是我不能使用live函数。我需要截取一个动态创建的项目的点击/更改事件。如果不使用live，我如何做到这一点？我不能升级到jquery 1.4。
浏览 1提问于2010-11-15得票数 0
回答已采纳
4回答
我正在尝试有一个单选按钮列表，当用户单击其中一个按钮时，我想要报警(“警告消息”)。
我已经创建了一个静态单选按钮，如果我单击它，我可以看到Alert()框。但是如果我单击动态创建的单选按钮，Alert()就不会出现。
这是静态单选按钮，它会触发Alert()
<input type="radio" class="radio_profile" name="radio_profile" id="radio_profile_not_found" value="0">
这是在webmethod中创建的，它不会
浏览 0提问于2013-03-05得票数 0
回答已采纳
我正在尝试更改select标记的selectedindex。但通过jquery更改索引时不会触发onchange事件。
我正在为select标签动态创建选项。我不会知道选项标签的值。
有没有其他方法可以做到这一点呢？这是我的代码片段。请随意提供输入。
function callFunc(obj) {
console.log(obj.value);
}
setTimeout(() => {
$("#select1")[0].selectedIndex = 2;
}, 2000);
<script src="https://ajax.googlea
浏览 26提问于2017-12-27得票数 2
回答已采纳
当用户单击ADD按钮/ plus符号时，我试图动态地创建一个由3个表单字段组成的行。
用于创建表单元素的Javascript代码如下:
<script type="text/javascript">
var field_counter = 1;
var field_limit = 5;
species = document.getElementById('species');
breed = document.getElementById('breed');
function ad
浏览 3提问于2015-10-07得票数 3
回答已采纳
我用jquery在数据库中获得用户列表，并使用它创建select标记，在将该标记放入html标记后，我无法获得绝对的选项可选值。
HTML:
<td>
<span id='author_name'></span>
</td>
jquery:
$.post("model/controller.php", {postaction:'getUserList'},
function(data){
userList = data.userList;
浏览 2提问于2013-06-15得票数 0
为了简单起见，我的站点有两个浮动的DIV块。#侧边栏和#内容。在我的侧边栏中，我有一个展开的jQuery垂直折叠菜单。(嗯，这是一个手风琴菜单)
无论如何，当用户单击子菜单标题之一时，它会展开菜单，并强制其包含的DIV也展开。
我正在寻找一种方法，使用jQuery，将#Content扩展到与#Sidebar相同的大小，因为#Sidebar正在扩展。这个是可能的吗？
我已经尝试了正常的方法来使两个DIV的大小相同，但它是在页面加载时这样做的，而不是动态加载。
谢谢你的帮助！瑞克
浏览 0提问于2012-05-08得票数 0
我有一个问题，在传递一个html元素到jQuery。我知道使用attr()我们可以访问属性。然而，我觉得我做错了什么。
这是我的简单jQuery函数：
<script type="text/javascript">
function test(value) {
alert(value);
}
</script>
我有一个由foreach循环创建的动态列表框：
<select multiple="multiple" name="factors1" id="main_factor
浏览 0提问于2012-09-07得票数 4
回答已采纳
我有1个Jquery和2个html文件。我创建了一个html页面，使其具有这样的select选项。
<p class="style1">
Select your category :
<select id="selection" name="D1">
<option value ="football" selected =selected>Football Team</option>
<option
浏览 2提问于2013-01-29得票数 0
我有一个DIV元素，它包含动态创建的TEXTAREAs、<input type="file"/>和<input type="checkbox"/>。
目前，我已经在上面的DIV上绑定了三个事件，如下所示
jQuery("#uniqueId ").bind("click change keypress", function(e){
....
....
});
现在出现的问题是，当我单击file输入按钮浏览并上传文件或选中复选框时，我收到以下错误
Uncaught InvalidStateErr
浏览 4提问于2013-09-30得票数 0
回答已采纳
我有一些动态创建新div (表单中的输入)的JS。它工作得很好。我单独使用了一些jquery来检查下拉输入，如果单击某个特定的选择，则会显示一个单独的div。它工作得很好。
如果我试图使用jquery在一个动态创建的div中显示一个单独的div，它不起作用。它的第一个实例可以工作，但动态创建的实例都不起作用。在四处寻找后，看起来我需要一个代理，但我似乎无法针对我的具体情况弄清楚它。
JSFiddle： (更改第一个字段中的"CPI“下拉列表，以便触发事件)。小提琴包括用于动态创建div的其他JS。
如有任何建议，我们将不胜感激。
<div style="float:lef
浏览 0提问于2013-07-17得票数 1
回答已采纳
我有三个选择。当第一个值为2时，则禁用第三个select。当第二个select值为3时，则禁用第三个select。
这是jfiddle链接：
我的问题是:我想将我的2 jQuery函数插入到一个jQuery函数中，这会对任何一个函数做出反应。
$('.one').trigger('change');
或
$('.two').trigger('change');
我想这样做，因为当我将第一个select设置为两个，第二个select设置为三个select时，禁用了第三个select，但是当我将第一个select的值从2时更改时，启用
浏览 6提问于2013-05-31得票数 2
回答已采纳
我有一些动态创建select下拉菜单的代码。我希望每个选择下拉菜单有一个"onchange“能力，以调用一个不同的功能，一旦选择.到目前为止我很难做到这一点..。感谢你的帮助..。谢谢!
function createSections(num) {
var value = num.value;
alert(value);
}
jQuery('#number-of-units').change(function() {
var num = parseInt(jQuery(this).val());
浏览 0提问于2014-05-02得票数 0
回答已采纳
3回答
我有选项1到10的选择框，如下面的.If，我选择了一个数字，然后我需要动态地填充那些正好在选择框下面的输入文本框，每个输入文本框的左边都有自己的标签，例如label1、label2等。
<form>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4
浏览 4提问于2013-09-13得票数 0
回答已采纳
2回答
我有一个我无法解决的任务，我希望能从你那里得到一些帮助。我希望在select选项中显示来自本地主机的所有数据库，当我选择其中一些数据库时，我希望在另一个select选项中显示所选数据库中的所有表，而当我选择其中一些表时，我希望动态显示所选表的字段(列)。我认为用jquery做这件事会更好。
为了显示所有的数据库、表和字段，我使用了mysql_database_list和mysql_table_list，但我不能动态地这样做。如果有什么想法，请帮帮忙？
浏览 2提问于2012-11-23得票数 1
回答已采纳
我正在使用php mysql + ajax jquery创建动态下拉列表，第二个下拉列表的填充是基于第一个下拉列表的选择，第三个下拉列表的选择是基于第二个下拉列表的选择，但它不起作用，有人能帮我吗？
dbconfig.php
<?php
$host = "localhost";
$user = "****";
$password = "***";
$db = "lam_el_chamel_db";
?>
select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
浏览 5提问于2013-04-24得票数 0
我有一个jsp页面。我有一个数字选择列表。它有一些默认值，但它是动态生成的。我还有一个文本字段。我希望文本字段应该完全按照从选择列表中选择的选项自动填充。我使用jquery来做这件事。
但是我看到，当jsp页面加载时，选择列表就在那里，其默认值为空，但文本字段为空。仅当我更改选项时，文本字段才会用选定的选项填充。我希望当页面加载时，文本字段也会像选择列表一样填充动态生成的选项。
我在脚本标记中使用jquery的代码是：
$(document).ready(function(){
$("#select_id").change(function()
浏览 2提问于2012-07-16得票数 0
回答已采纳
我使用Jquery来选择下拉列表的值。
我需要对OnChange事件(jQuery中的.change)执行一些操作，但如果下拉列表中只有一个选项，我就无法在onChange事件中捕获它。
我的下拉列表是动态形成的，所以我不知道我会得到多少个选项，但如果只有一个选项，我就会遇到问题。
有没有办法只用一个<option>来捕获<select>的OnChange事件
浏览 0提问于2012-02-08得票数 3
1回答
我在上有一个数据库的搜索页面，当“疾病”被选中时，我使用jQuery动态地提供另一个选项。这在Chrome、Firefox和Safari上运行良好，但在IE中就失效了。有解决这个问题的办法吗？
jquery代码是
$(document).ready(function() {
$("#select").change(function() {
if ($(this).val() == 'disease') {
$("#value").html("for <select id='filter
浏览 1提问于2011-10-17得票数 0
回答已采纳
如何将id (在while循环中动态生成)传递给jquery。
echo '<div><td><select name=categoryname id="name-first'.$i.'" >';
echo '</select></td>';
$(function(){
$('#name-first+<?php echo $i; ?>').on('change',function(){
var selInd
浏览 0提问于2014-03-18得票数 2
3回答
我通过jQuery创建了一些标记，并为它定义了一个类名，如下所示：
$('#tr').html('<select class="optcode">
<option>select code</option>
<option>select code</option>'
</select>);
在另一个地方，我也希望通过下面的代码按类名访问<select>，但它不起作用，如
浏览 3提问于2016-03-21得票数 0
回答已采纳
2回答
我有一个下拉元素(< select >)和一个容器。
<div class='container' />
<script>
var dropdown = "<select class='multi-dropdown'> ... </select>"
</script>
当值被更改时，您将得到另一个值。这是合乎逻辑的，只有在文档准备好(第一个文档在那里创建)和客户端修改最后一个文档时才会发生。
$(document).ready( function(){
$(&#
浏览 2提问于2013-10-08得票数 0
回答已采纳
3回答
我有以下功能：
jQuery("el").click(function() {
var index = jQuery(this).index(),
select = jQuery('select.SelectClass option').get(index + 1),
$select = jQuery(select);
$select.attr('selected', 'selected');
jQuery(jQuery('select.selectClass').get(
浏览 1提问于2011-04-08得票数 0
回答已采纳
2回答
我对多选列表使用了。我已经在后台代码中动态创建了控件，并且可以成功地绑定到它。
源代码看起来像这样：
<div class="multiselectlist">
<select id="MainContent_List" multiple="multiple" name="ctl00$MainContent$List">
</div>
动态控件位于更新面板中。当我点击一个按钮时，它会进行部分回发，并且会丢失与之相关的jQuery特性。
我假设我需要“重新注册脚本”，所以我这样做了：
Scri
浏览 3提问于2012-10-24得票数 1
回答已采纳
我有动态选择下拉菜单。例如，如果您选择一个特定月份，则第二个选择元素将填充该月的天数。
这可以按预期工作，但是当用户在iPhone上并使用Mobile Safari的“表单助手”中内置的“下一步”按钮时，change事件(使用jQuery)似乎不会触发，第二次选择也不会更新。
$('.month').change(function() {
// update "days" select element
});
仅供参考，我也在使用jQuery手机
浏览 0提问于2011-10-07得票数 10
回答已采纳
3回答
我在我的数据库中有一个用于编辑数据的表单，用户将首先通过使用3来选择一个项，然后通过jQuery的.load()将该项上的现有数据添加到表单中
我现在面临的问题是，我有一对单选按钮，它们动态地添加到单选按钮的值上(即选中哪个)，我希望在表单中隐藏()或显示()a。
当前，在加载动态部分之后，即使选中单选按钮"No“，在加载动态添加部分时仍会加载div。
编辑。当选中"No“单选按钮时，我希望加载整个部分，但是在加载it.Currently时显示隐藏的部分，而我隐藏的唯一方法就是再次单击”否“到”是“到”否“。
我的jQuery代码(摘录)：
<!--Manages loa
浏览 2提问于2013-11-26得票数 1
回答已采纳
2回答
因此，在一个特定的页面上，我有一些表单元素，介于3到8之间，这取决于用户及其在页面上的操作。
如何将特定的onblur事件动态添加到页面上的所有表单元素？
如果我有：
function doThisOnBlur() { stuff }
一旦页面加载，我如何将相同函数添加到所有这些函数中。页面加载后不会创建任何元素，但不同的用户可能会出现不同的元素。
<input type="text" id="x">
<input type="text" id="y">
<select id="z"&
浏览 0提问于2010-06-25得票数 9
回答已采纳
1回答
我试图在用户动态创建的另一个div中动态(通过输入)生成div。问题是我能够动态地生成这两个div，但是子div不会通过输入创建任何div。 第二个id="usersvmaddnewdivsN“不会生成任何div。你能帮帮我吗？谢谢。 (查看jsfiddle以更好地了解) https://jsfiddle.net/rqebwm59/3/ $(function() {
$(".instancesN").change(function() {
var value = $(this).val();
$(".instancesNContainer&
浏览 25提问于2019-08-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
