select 的更改未触发 jQuery
[英]jQuery on change not triggering for select
问题描述
I am using a select dropdown( location: states ) to which I am appending some options on a response of ajax object.
我正在使用 select 下拉列表（位置：状态），我在 ajax object 的响应中附加了一些选项。
Now I want to load cities via ajax request on change of state.现在我想通过 ajax 请求加载城市，以更改 state。 But, the on change event won't work但是，on change 事件不起作用
I am using below HTML code我在下面使用 HTML 代码
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label>Select state</label><span id="stateLoader"></span>
<select class="hash-checkout__section-1-add-address-state form-control"></select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label>Select city</label><span id="cityLoader"></span>
<select disabled class="hash-checkout__section-1-add-address-city form-control"></select>
</div>
Below ajax response, I am using to append the options to states在 ajax 响应下方，我正在使用 append 的选项来状态
.done( function( resp ) {
$( '#stateLoader' ).html( '' );
$this.attr( 'disabled', false );
if ( resp.status === 'success' )
{
stateDataStatus = true;
$.each( resp.states , function( index, val ) {
$this.append( val );
});
}
})
Then I am using below code to trigger an onChange event然后我使用下面的代码来触发 onChange 事件
$( 'body' ).on( 'change', '.hash-checkout__section-1-add-address-state', function()
{
alert('triggered');
// $( '#cityLoader' ).html( dataLoader );
});
But for some reason, the on change is not triggering and I am not sure why?但由于某种原因，on change 没有触发，我不确定为什么？ why?为什么？
2 个解决方案
解决方案1
1 已采纳 2021-02-03 20:05:28
Hello I've tested this arrangement for you:您好我已经为您测试了这种安排：
It's just simple, you should add new val as options using:这很简单，您应该使用以下命令添加新的 val 作为选项：
$this.append( "<option>" + val + "</option>" );
HTML index.html: HTML 索引。html：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var stateDataStatus = false;
$(document).ready(function () {
$( 'body' ).on( 'change', '.hash-checkout__section-1-add-address-state', function()
{
alert('triggered');
// $( '#cityLoader' ).html( dataLoader );
});
$( 'body' ).on( 'click focus', '.hash-checkout__section-1-add-address-state', function() {
//
// do nothing if having already done:
//
if(stateDataStatus) {
return false;
}
//
$this = $( this );
$.ajax({
url: "getstates.php"
}).done( function( resp ) {
//$( '#stateLoader' ).html( '' );
//$this.attr( 'disabled', false );
//alert(resp);
if ( resp.status === 'success' ) {
$.each( resp.states , function( index, val ) {
$this.append( "<option>" + val + "</option>" );
});
stateDataStatus = true;
}
});
});
});
</script>
</head>
<body>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label>Select state</label><span id="stateLoader"></span>
<select class="hash-checkout__section-1-add-address-state form-control"></select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label>Select city</label><span id="cityLoader"></span>
<select disabled class="hash-checkout__section-1-add-address-city form-control"></select>
</div>
</body>
</html>
jQuery.ajax() calls getstates.php that returns just a JSON object like this: jQuery.ajax() 调用 getstates.php 只返回一个 JSON ZA8CFDE6331BD59EB2ACZ6B86 像这样：
<?php
header("Content-Type: application/json; charset=UTF-8");
$array = ["status" => "success", "states" => ["france", "china", "usa"]];
echo json_encode($array, JSON_PRETTY_PRINT);
?>
解决方案2
-1 2021-02-03 18:35:54
Add id's to the select, like this:将 id 添加到 select，如下所示：
//State Select - First Select $('#stateLoaderSelect').on( 'change', function() { alert('triggered'); // $( '#cityLoader' ).html( dataLoader ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <label>Select state</label><span id="stateLoader"></span> <select id="stateLoaderSelect" class="hash-checkout__section-1-add-address-state form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <label>Select city</label><span id="cityLoader"></span> <select id="cityLoaderSelect" disabled class="hash-checkout__section-1-add-address-city form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.