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

Question

嗨，当我选择下拉菜单时，我的Html中有两个下拉菜单。我的第二个下拉列表需要更改相关项目。我的下拉菜单有两项国内和国际第二个下拉列表有三个项目INR，USD，EUR

当我更改第一个下拉列表时，所选的国内项目需要在第二个下拉列表中显示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函数

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");
//}
}

我在UI中没有得到正确的值，请回答我。

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/