Блог

Главная - Вопросы по программированию - Первый Раскрывающийся список Изменяет Отображение Второго Раскрывающегося списка, связанного с Элементом

Первый Раскрывающийся список Изменяет Отображение Второго Раскрывающегося списка, связанного с Элементом

#javascript #jquery #asp.net-core #dropdown

Вопрос:

Привет, у меня есть два раскрывающихся списка в моем Html, когда я выбираю свой раскрывающийся список. мой второй раскрывающийся список должен изменить связанные элементы. В моем выпадающем списке один из двух пунктов Внутренний, международный, во втором выпадающем списке три пункта INR, USD, EUR

Когда я изменяю свой первый раскрывающийся список, выбранный внутренний элемент должен отображаться во втором раскрывающемся списке, в котором отображается только элемент, который нужно скрыть. Затем я выбираю международный элемент в моем первом выпадающем списке, который должен отображаться во втором выпадающем списке в долларах США, а отображается только валюта евро. как этого достичь. (с использованием 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/

Метки: ,