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

Posted 2023-03-25

【中文标题】第一个下拉菜单更改第二个下拉菜单相关项目显示

【英文标题】：First Dropdown Changes Second Dropdown Related Item display

【发布时间】：2021-07-06 23:18:22

【问题描述】：

您好，当我选择下拉列表时，我的 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");
    //

我的用户界面没有得到正确的值，请回答我。

【参考方案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/