我有一個腳本，它根據國家/地區 ID 填充狀態下拉串列，雖然一切正常，但我只能在頁面重新加載時保存國家/地區下拉選項，而不能使用 html localStorage 保存狀態選項。
這是我的代碼：
$(document).ready(function() {
var country_id = null;
var state_id = null;
$('#country').select2();
$('#state').select2();
$('#city').select2();
$('select[name="country"]').on('change', function() {
var country_id = $(this).val();
if (country_id) {
$.ajax({
url: "/world/getStates.php",
type: "GET",
data: {
'country_id': country_id
},
dataType: "json",
success: function(data) {
$('select[name="state"]').empty();
$('select[name="city"]').empty();
$('select[name="state"]').append('<option value="">Select State</option>');
$.each(JSON.parse(data), function(key, value) {
$('select[name="state"]').append('<option value="' value.id '">' value.name '</option>');
});
}
});
} else {
$('select[name="state"]').empty();
}
});
$('select[name="state"]').on('change', function() {
var country_id = $('#country').val();
var state_id = $(this).val();
if (state_id) {
$.ajax({
url: "/world/getCities.php",
type: "GET",
data: {
'country_id': country_id,
'state_id': state_id
},
dataType: "json",
success: function(data) {
$('select[name="city"]').empty();
$('select[name="city"]').append('<option value="">Select City</option>');
$.each(JSON.parse(data), function(key, value) {
$('select[name="city"]').append('<option value="' value.id '">' value.name '</option>');
});
}
});
} else {
$('select[name="city"]').empty();
}
});
$('#country').val("value from localStorage").trigger('change');
$('#state').val("value from localStorage").trigger('change');
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<label for="country">Country</label>
<select class="csc-select" name="country" id="country">
<option value="">Select Country</option>
<option>Australia</option>
<option>Denmark</option>
<option>Japan</option>
<option>Norway</option>
<option>Switzerland</option>
</select>
<label for="state">State</label>
<select class="csc-select" name="state" id="state">
<option value="">Select State</option>
</select>
<label for="city">City</label>
<select class="csc-select" name="city" id="city">
<option value="">Select City</option>
</select>因此，當我在第一次更改國家/地區選擇之后呼叫它時，它會根據 localStorage 值選擇國家/地區并觸發更改，但對國家/地區卻沒有這樣做，我在這里缺少什么想法？
uj5u.com熱心網友回復：
您的狀態下拉串列中的選項是在執行 ajax 成功后加載的，因此您的其他代碼不會等待它并.val()在此之前觸發，這就是該值未標記為狀態下拉串列中的選定值的原因。現在，要解決此問題，您可以將該部分移動到 ajax 的成功函式中，然后在將選項附加到狀態下拉串列中后呼叫您的更改事件。
演示代碼：
$(document).ready(function() {
var country_id = 1 //localStorage.getItem("select2CountryValue");
var state_id = 3 //localStorage.getItem("select2StateValue");
var page_load = true; //added this
var data = [{
"id": 1,
"name": "xyz_State1"
}, {
"id": 2,
"name": "xyz_State2"
}, {
"id": 3,
"name": "xyz_State3"
}] //this is just the demo datas
$('#country').select2();
$('#state').select2();
$('select[name="country"]').on('change', function() {
var country_id = $(this).val();
//localStorage.setItem("select2CountryValue", country_id);
if (country_id) {
/*$.ajax({
url: "/world/getStates.php",
type: "GET",
data: {
'country_id': country_id
},
dataType: "json",
success: function(data) {
console.log(data);
$('select[name="city"]').empty();*/
$('select[name="state"]').empty();
$('select[name="state"]').append('<option value="">Select State</option>');
$.each(data, function(key, value) {
$('select[name="state"]').append('<option value="' value.id '">' value.name '</option>');
});
//check if the change is called on page load
if (page_load == true) {
$('#state').val(state_id).trigger('change'); //assign slected value after elemnt option is added in dom
page_load = false; //add this so that next time this doesn't get execute
}
/* }
});*/
} else {
$('select[name="state"]').empty();
}
});
$('#country').val(country_id).trigger('change');
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<p>
<span>Country</span>
<select class="csc-select" name="country" id="country">
<option value="">Select Country</option>
<option value="1">
xyz
</option>
<option value="2">
xyz2
</option>
</select>
</p>
<p>
<span>State</span>
<select class="csc-select" name="state" id="state">
<option value="">Select State</option>
</select>
</p>uj5u.com熱心網友回復：
當我在第一次更改國家/地區選擇之后呼叫它時，它會根據 localStorage 值選擇國家/地區并觸發更改，但它對國家/地區卻沒有這樣做，我在這里缺少什么想法？
當您為#country串列觸發更改事件時，國家/地區串列已包含值。
之后立即觸發#state串列的更改事件時，串列仍然是空的。不能選擇任何值，因此更改事件不執行任何操作。
需要等到狀態串列填充完畢，再觸發change事件。
// this works immediately, because there are countries in your HTML
$('#country').val("value from localStorage").trigger('change');
// this needs to happen in the `success` callback of country Ajax call
$('#state').val("value from localStorage").trigger('change');
另一種方法是先創建一個臨時選項：
$('#state').append("temporary <option> created from localStorage");
$('#state').val("value from localStorage").trigger('change');
這樣您就不必等待。
話雖如此，Select2 支持遠程資料，您不必自己撰寫 Ajax 請求或<option>創建。
$("#country").select2({
ajax: {
url: "/world/getCountries.php"
},
placeholder: 'Pick a country',
minimumInputLength: 1
}).change(function () {
$("#state").val("").trigger("change");
});
$("#state").select2({
ajax: {
url: "/world/getStates.php",
data: (params) => {
// add selected country ID to URL params
params.country_id = $("#country").val();
return params;
}
},
placeholder: 'Pick a state',
minimumInputLength: 1
});
// initialize selection from previous state...
$("#country").append('<option value="5">Switzerland</option>');
$("#country").val("5");
$("#state").append('<option value="9">Appenzell</option>');
$("#state").val("9");
// server side mock-up -------------------------------------------------
const countries = [
{id: 1, text: 'Australia'},
{id: 2, text: 'Denmark' },
{id: 3, text: 'Japan'},
{id: 4, text: 'Norway'},
{id: 5, text: 'Switzerland'}
];
const states = [
{id: 1, text: 'New South Wales', country_id: 1},
{id: 2, text: 'Victoria', country_id: 1},
{id: 3, text: 'Hovedstaden', country_id: 2},
{id: 4, text: 'Midtjylland', country_id: 2},
{id: 5, text: 'Hokkaido', country_id: 3},
{id: 6, text: 'Shikoku', country_id: 3},
{id: 7, text: 'Northern Norway', country_id: 4},
{id: 8, text: 'Southern Norway', country_id: 4},
{id: 9, text: 'Appenzell', country_id: 5},
{id: 10, text: 'Zürich', country_id: 5},
];
$.mockjaxSettings.logging = 1;
$.mockjax({
url: "/world/getCountries.php",
contentType: "application/json",
response: function(settings) {
this.responseText = {
results: countries.filter(item =>
!settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
)
};
}
});
$.mockjax({
url: "/world/getStates.php",
contentType: "application/json",
response: function(settings) {
console.log(settings.data);
this.responseText = {
results: states.filter(item =>
item.country_id == settings.data.country_id && (
!settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
)
)
};
}
});select {
width: 200px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"></script>
<select id="country"></select>
<select id="state"></select>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370784.html
標籤：javascript 阿贾克斯 jquery-select2
上一篇：帶有動態ajax文本的按鈕