Блог

Главная - Вопросы по программированию - Отключение перпендикулярного значения второго выпадающего списка при выборе того же значения из первого выпадающего списка

Отключение перпендикулярного значения второго выпадающего списка при выборе того же значения из первого выпадающего списка

#javascript #jquery #html #jquery-mobile

#javascript #jquery #HTML #jquery-мобильный

Вопрос:

Отключение пертикального значения второго выпадающего списка при выборе того же значения из первого выпадающего списка.Вот jsfiddle! это данная ссылка, по которой я должен выполнить определенную операцию. ниже приведен мой код, который является кодом для вызова данных..

  Here is My Html
  

 <select name="select-choice-1" class="filter-menu" id="dropDownFromCity">
                            <option value="">- -Select From City- -</option>
                        </select>
                      
                       
                        <select name="select-choice-1" class="filter-menu" id="dropDownToCity"   >
                            <option value="">- -Select To City- -</option>
                        </select>
                     
                       
                        <select name="select-choice-1" class="filter-menu" id="dropDownViaCity"  multiple="multiple" data-native-menu="false" data-placeholder="false" >
                             <option value="">- -Select Via Via- -</option>
                        </select>

Вот мой jquery, который вызывает выпадающие данные

         function selectRadioButton() {
            var airPortId = $('input[name=airPortName]:checked').val();
            var loadingbar = $("#loadingBar");
            loadingbar.empty().append(window.loadingAnimation);
    
            setTimeout(function () {
                var Surl = "http://PassengerService.asmx/LoadDropDownlist";
                var dataString = "{'i':'"   airPortId   "'}";
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: Surl,
                    corssDomain: true,
                    data: dataString,
                    dataType: "json",
                    success: function (data) {
                        var jdata = $.parseJSON(data.d);
                        $("#dropDownFromCity").html("");
                        $("#dropDownToCity").html("");
                        $("#dropDownViaCity").html("");
                        //$("#dropdownViaCitySecond").html("");
                        $("#loadingBar").html("");
                        
                        $("#dropDownFromCity").append($("<option></option>").val("").html("- -Select From City- -"));
                        $("#dropDownToCity").append($("<option></option>").val("").html("- -Select To City- -"));
                        $("#dropDownViaCity").append($("<option></option>").val("").html("- -Select Via City- -"));
                        //$("#dropdownViaCitySecond").append($("<option></option>").val("").html("- -Select Via City- -"));
                        $.each(jdata, function (key, value) {
    
                            $("#dropDownFromCity").append($("<option></option>").val(value.AirportDetailsId).html(value.LocationDetail));
                            $("#dropDownToCity").append($("<option></option>").val(value.AirportDetailsId).html(value.LocationDetail));
                            $("#dropDownViaCity").append($("<option></option>").val(value.AirportDetailsId).html(value.LocationDetail));
                             
                            //$("#dropdownViaCitySecond").append($("<option></option>").val(value.AirportDetailsId).html(value.LocationDetail))
                        });
                        $("#dropDownViaCity").selectmenu().selectmenu('refresh');
                        
                        $("#dropDownFromCity-button").find('span').html("- -Select From City- -");
                        $("#dropDownToCity-button").find('span').html("- -Select To City- -");
                        $("#dropDownViaCity-button").find('span').html("- -Select Via City- -");
                        //$("#dropdownViaCitySecond-button").find('span').html("- -Select Via City- -");
                    }
                });
            }, 2000);
    
        }

Вот моя проверка для выпадающего класса

  $('.filter-menu').on('change', function () {
            $('.filter-menu').find('option').prop('disabled', false);
    
            $('.filter-menu').each(function () {
                $('.filter-menu').not(this).find('option[value="'   this.value   '"]').prop('disabled', true);
            });
    
            // rebuild select menus
            $('select').selectmenu('refresh', true);
        });

Комментарии:

1. У вас есть только один выпадающий список в вашем jsfiddle…

2. Это было просто для идеи, как создать выпадающий список с несколькими вариантами выбора .. потому что третий выпадающий список — это мой выпадающий список с несколькими вариантами выбора

3. Итак, вы ожидаете, что кто-нибудь покажет вам, как отключить второй выпадающий список, когда он используется, но в вашем примере исходного кода вы отображаете только один ….?

4. Я думаю, для вас было бы уместно отобразить несколько выпадающих списков, поскольку вы ожидаете, что кто-нибудь объяснит, как отключить хотя бы один из них, пока используется другой, иначе людям не с чем будет работать. Вы не должны ожидать, что другие будут выполнять больше работы, чем требуется для решения вашей проблемы. Пожалуйста, найдите время, чтобы обновить исходный код вашего примера, и я уверен, что тогда кто-нибудь захочет вам помочь. Также, пожалуйста, покажите свои попытки и объясните, с какими проблемами вы столкнулись. Спасибо.

5. #NewToJS можете ли вы, пожалуйста, проверить мой обновленный код .. а также прикрепленную демонстрацию jsfiddle