文章/答案/技术大牛

发布

社区首页 >问答首页 >第一次下拉更改第二次下拉相关项目显示

问第一次下拉更改第二次下拉相关项目显示
EN

Stack Overflow用户

提问于 2021-04-11 18:38:09

回答 1查看 337关注 0票数 0

嗨，当我选择下拉时，我的Html中有两个下拉列表。我的第二个下拉列表需要更改相关的项目。我的下降一项有两项国内，国际第二项有三项INR，美元，欧元。

当我改变我的第一个下拉国内项目选择需要显示在我的第二个下拉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中没有得到正确的值，请回答我。

javascript

jquery

asp.net-core

dropdown

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-12 02:34:22

下面是一个可以使用的演示：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67048842

复制

相似问题

问第一次下拉更改第二次下拉相关项目显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问第一次下拉更改第二次下拉相关项目显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问第一次下拉更改第二次下拉相关项目显示
EN