First Dropdown Changes Second Dropdown Related Item display

Hi I have two dropdowns in my Html when I select my dropdown. my second dropdown needs to change related items. My dropdown one has two item Domestic, international second dropdown has three item INR, USD, EUR

When I change my first dropdown Domestic item selected need to display in my second dropdown INR Item only display other item need to hide. Then I select an international item in my first dropdown that needs to display in my second dropdown USD, and EUR currency only displays. how to achieve it. (using jquery or javascript). My code below here.

<div class="input-group input-group-sm">
                        <select id="OrderType" asp-for="Type" title="Mode" class="form-control form-control-sm border selectpicker" onchange="GetCurrencybyType(this)">
                            <option id="DomId" value="1" selected>Domestic</option>
                            <option id="InterId" value="2">International</option>
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <select id="CurrencyType" asp-for="Currency" title="Mode" class="form-control form-control-sm border selectpicker">
                            <option id="InrId" value="1" selected>INR</option>
                            <option id="UsdId" value="2">USD</option>
                            <option id="EurId" value="2">EUR</option>
                        </select>
                    </div>

My Jquery function

function GetCurrencybyType(id) {
    var value = id.value;
    if (value == 2) {
        $('#mySelect').children().remove().end()
            .append('<option selected value="USD">USD</option>');
    }
    else {
        $("option[value='2']").remove();
        $('select[id=CurrencyType]').val('<option value="' + id.val + '">' + "INR" + '</option>');
    }
    
    
    //var value = id.value;
    
    //var selectedCountry = $(this).children("option:selected").val();

    //alert("You have selected the country - " + value);
    //var InrIdValue = $("#InrId").val();
    //if (value == "Domestic") {
    //    $("#CurrencyType").html("");
    //    var result = $("#CurrencyType").html("");
    //    alert(result);
    //    $("#CurrencyType").append($("<option />").val(InrIdValue).text(InrIdValue));
    //    var result1 = $("#CurrencyType").append($("<option />").val(InrIdValue).text(InrIdValue));
    //    alert(result1);
    //    //$('select[id=CurrencyType]').val(InrIdValue);
    //    //var result = $('select[id=CurrencyType]').val(InrIdValue);
    //    //alert(result);
    //    //$('select[id=CurrencyType]').val('<option value="' + InrIdValue + '">' + InrIdValue + '</option>');
    //}
    //else {
    //    alert("International");
    //}
}

i not getting correct value in my UI please answer me.

Answer

Here is a working demo you could follow:

<div class="input-group input-group-sm">
    <select id="OrderType" title="Mode" class="form-control form-control-sm border selectpicker" >
        <option id="DomId" value="1">Domestic</option>
        <option id="InterId" value="2">International</option>
    </select>
</div>
<div class="input-group input-group-sm">
    <select id="CurrencyType"  title="Mode" class="form-control form-control-sm border selectpicker">
        <option value="" selected>Select A Currency</option>
    </select>
</div>

@section Scripts
{
    <script>
        $(function () {
            var subjectObject = {
                "1": [
                    "INR"
                ],
                "2": [
                    "USD",
                    "EUR"
                ]
            };
            $('#OrderType').change(function () {
                var OrderType = $(this).val()
                var CurrencyType = subjectObject[OrderType] || [];

                var html = $.map(CurrencyType, function (cnt) {
                    return '<option value="' + OrderType + '">' + cnt + '</option>'
                }).join('');
                $('#CurrencyType').html(html)
            });
        })       
    </script>
}

A JSFiddle you could check: https://jsfiddle.net/b6pe3vxq/

Advertisement

Answer