Я пытаюсь сделать фильтр выпадающих опций по значению другого выбранного параметра в событии dropdwon change.
Я пытаюсь сделать с этим 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();
});
});
});
Все работает нормально, но когда я выбираю выпадающий список валют, Выпадающий список сбрасывает и отображает все значения по идентификатору валюты из базы данных.
Снимок экрана 1 Снимок экрана 2
Итак, теперь я точно хочу удалите дополнительные выпадающие списки, отфильтровав их по значению выпадающего списка Страна.
Пожалуйста, помогите завершить это ...
Редактировать: Опять я попробовал этот простой скрипт
$("#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, код не работает ....
Есть решение, пожалуйста ...?