First Dropdown Changes Second Dropdown Related Item 显示

Question

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

当我更改我的第一个下拉列表 Domestic 项目时 selected 需要在我的第二个下拉列表中显示 INR 项目只显示其他项目需要隐藏。然后我 select 我的第一个下拉列表中的一个国际项目需要在我的第二个下拉列表中显示美元，而欧元货币只显示。如何实现它。（使用 jquery 或 javascript）。我的代码在下面。

<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 1

这是一个您可以关注的工作演示：

<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>
}

您可以查看的 JSFiddle：https://jsfiddle.net/b6pe3vxq/

First Dropdown Changes Second Dropdown Related Item 显示

First Dropdown Changes Second Dropdown Related Item display

javascript

jquery

dropdown

asp.net-core