Javascript 第一个下拉菜单更改第二个下拉菜单相关的项目显示

嗨，当我选择我的下拉列表时，我的Html中有两个下拉列表。我的第二个下拉列表需要更改相关项目。 我的下拉列表有两个项目国内，国际 第二个下拉列表有三项：印度卢比、美元、欧元

当我更改我的第一个下拉列表时，选择的国内项目需要显示在我的第二个下拉列表中INR项目仅显示其他需要隐藏的项目。 然后，我在第一个下拉列表中选择一个国际项目，该项目需要在第二个下拉列表中以美元显示，而欧元货币仅显示。如何实现它。（使用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>

国内的
国际的
印度卢比
美元
欧元

我的Jquery函数

函数GetCurrencybyType（id）{ var值=id.value； 如果（值==2）{ $（'#mySelect'）.children（）.remove（）.end（） .附加（“美元”）； } 否则{ $（“选项[value='2']”）。删除（）； $（'select[id=CurrencyType]'）.val（''+'INR'+''）； } //var值=id.value； //var selectedCountry=$（this）.children（“选项：selected”）.val（）； //警报（“您已选择国家-”+值）； //var InrIdValue=$（“#InrId”）.val（）； //如果（值=“国内”）{ //$（“#CurrencyType”）.html（“”）； //var result=$（“#CurrencyType”）.html（“”）； //警报（结果）； //$（“#CurrencyType”）.append（$（“”）.val（InrIdValue.text（InrIdValue））； //var result1=$（“#CurrencyType”）.append（$（”“）.val（InrIdValue.text（InrIdValue））； //警惕（结果1）； ////$（'select[id=CurrencyType]'）.val（InrIdValue）； ////var result=$（'select[id=CurrencyType]'）.val（InrIdValue）； ////警报（结果）； ////$（'select[id=CurrencyType]'）。val（''+InrIdValue+''）； //} //否则{ //警报（“国际”）； //} } 我的UI中没有得到正确的值，请回答我

---

下面是一个您可以遵循的工作演示：

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

国内的
国际的
选择一种货币
@节脚本
{
$（函数（）{
变量subjectObject={
"1": [
“印度卢比”
],
"2": [
“美元”，
“欧元”
]
};
$（'#OrderType'）。更改（函数（）{
var OrderType=$（this.val（）
var CurrencyType=subjectObject[OrderType]| |[]；
var html=$.map（CurrencyType，函数（cnt）{
返回“”+cnt+“”
}).加入（“”）；
$（'#CurrencyType'）.html（html）
});
})       
}

---

您可以查看一个JSFiddle:

谢谢。它起作用了。

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