【发布时间】：2020-04-27 19:26:38
【问题描述】：
我正在尝试通过 dropdwon 更改事件上的另一个选定选项值来过滤下拉选项。
我正在尝试使用这个 jquery，但没有任何反应。
$(function() {
var options = $("#selectAmount").html();
$("#currencyList").change(function(e) {
var text = $("#selectLang :selected").val();
$("#selectAmount").html(options);
if (text == "Select Amount") return;
$('#selectAmount :not([value^="' + text.substr(0, 3) + '"])').remove();
});
});
还有 HTML + PHP
<select class="custom-select" id="selectLang">
<option selected disabled>Select Your Country </option>
<?php foreach($countries as $country): ?>
<option value="<?php echo $country['country_id']; ?> ">
<?php echo $country['country_name']; ?> </option>
<?php endforeach; ?>
</select>
<select name="currency" id="currencyList" class="custom-select">
<option selected disabled>Select Currency </option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?> ">
<?php echo $currency['currency_name']; ?> </option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="amount">Custom Amount</label>
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text">$</span>
</div>
<a href="#" data-target="#view-plans" data-toggle="modal" class="view-plans-link">View Plans</a>
<select class="custom-select" id="selectAmount">
<option>Select Amount</option>
</select>
以及我用于过滤的完整 Jquery
$(document).ready(function() {
// ------------------ [ Country dropdown Change Event ] --------------
$("#selectLang").change(function() {
var countryId = $(this).val();
$("#selectFrame").fadeIn('slow');
$.ajax({
url: 'vendor/filter/process-controller.php',
type: 'POST',
data: {
langId: countryId
},
dataType: "JSON",
success: function(result) {
var items = "";
$("#selectFrame").empty();
$("#selectCode").empty();
$("#selectFrame").append(
"<option selected disabled> Select Operator </option>");
$("#selectCode").append(
"<input type='text' class='form-control form-control-md' id='selectCode' value=''>");
$.each(result, function(i, item) {
$("#selectFrame").append("<option value='" + item
.operator_id + "'>" + item.operator_name +
"</option>");
});
$.ajax({
url: 'vendor/filter/process-controller.php',
type: 'POST',
data: {
framId: countryId
},
dataType: 'JSON',
success: function(result) {
var code = "";
$("#selectCode").empty();
$.each(result, function(i, code) {
$('#selectCode').val(code.code);
});
$.ajax({
url: 'vendor/filter/process-controller.php',
type: 'POST',
data: {
cuId: countryId
},
dataType: 'JSON',
success: function(result) {
var amount = "";
$("#selectAmount").empty();
$.each(result, function(i, amount) {
$("#selectAmount").append("<option value='" + amount
.country_id + "'>" + amount.amount_name +
"</option>");
});
}
});
}
});
}
});
});
$("#currencyList").change(function() {
var currencyId = $(this).val();
$(this).fadeIn();$.ajax({
url: 'vendor/filter/process-controller.php',
type: 'POST',
data: {
amId: currencyId
},
dataType: 'JSON',
success: function(result) {
var amount = "";
$("#selectAmount").empty();
$.each(result, function(i, amount) {
$("#selectAmount").append("<option>" + amount.amount_name +
"</option>");
});
}
});
});
$(function() {
var options = $("#selectAmount").html();
$("#currencyList").change(function(e) {
var text = $("#selectLang :selected").val();
$("#selectAmount").html(options);
if (text == "Select Amount") return;
$('#selectAmount :not([value^="' + text.substr(0, 3) + '"])').remove();
});
});
});
一切正常，但是当我选择货币下拉菜单时，金额下拉菜单会重置并按数据库中的货币 ID 显示所有值。
所以，现在我确实想通过使用 Country 下拉列表的值进行过滤来删除额外的下拉列表。
请帮忙完成这个...
编辑： 我再次尝试了这个简单的脚本
$("#currencyList").change(function() {
var sel = $("#currencyList :selected").val();
$("#selectAmount option[value!= '"+ sel + "' ]").remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="currencyList">
<option>Select Currency</option>
<option value="1"> Bitcoin </option>
<option value="2"> Ethereum </option>
<option value="3"> Litecoin </option>
</select>
<select id="selectAmount">
<option>Select Amount</option>
<option value="1"> 0.0001 BTC </option>
<option value="2"> 0.005 ETH </option>
<option value="3"> 0.5 LTC </option>
</select>现在这段代码就像一个魅力，但如果我使用这个脚本来
$("#currencyList").change(function() {
var sel = $("#selectLang :selected").val();
$("#selectAmount option[value!= '"+ sel + "' ]").remove();
});
跟踪#currencyList 的变化并通过#selectLang 的选定选项值过滤代码不起作用....
请问有什么解决办法吗...？
【问题讨论】：
标签： javascript php html jquery ajax