按所选选项值过滤下拉选项

Question

I'm trying to make a dropdown option filter by another selected options value on dropdwon change event.

I'm trying do with this jquery but nothing happens.

$(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();

});
});

And The 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>

And The Full Jquery which I used for filtering

$(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();

});
});

});

Everything Works fine but when I select currency dropdown, The amount dropdown resets and shows all the value by currency id from database.

Screenshot 1 Screenshot 2

So, Now I exactly wanting to do removing the extra dropdowns by filtering with the value of Country dropdown.

Please kindly help to complete this...

Edit: Again I tried this simple script

 $("#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>

Now this Code works like a charm but if II use this script to

$("#currencyList").change(function() {
        var sel = $("#selectLang :selected").val();
        $("#selectAmount option[value!= '"+ sel + "' ]").remove(); 
          });

track the change of #currencyList and filter by the selected option value of #selectLang the code don't works....

Have any solution please...?

Answer 1

I have solved the problem. The mistake was in the jquery is that I had used filter query in the below of OnChange function

$("#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 sel = $("#selectLang").find(':selected').val();
            $("#selectAmount option[value!= '"+ sel + "' ]").remove();

      });
          });

          });

Recently, I have understood the actual problem and fixed it by adding the the filter query into the Onchange SUCCESS result function... Like This -

$("#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 value='" + amount
                        .country_id + "'>" + amount.amount_name +
                        "</option>");
                });
            var sel = $("#selectLang").find(':selected').val();
            $("#selectAmount option[value!= '"+ sel + "' ]").remove();

            }
        });



    });