как отфильтровать записи об изменении выпадающего в mvc Razor

Question

У меня есть требование, как будто у меня есть список поставщиков, которые привязаны к загрузке страницы, и у меня также есть раскрывающийся список, который используется для фильтрации записей поставщиков при изменении раскрывающегося списка.

Мой взгляд:

<div class="half-left">
            @Html.DropDownListFor(x => x.subCatObj.SubCategory_Id, Model.GetAllSubCategory, "--Select--", new { @id = "subCategory", @class = "contactField" })
        </div>


        @foreach (var vendor in Model.GetAllVendors)
        {
              @vendor.VendorCompanyName  
        }

у меня вопрос, как отфильтровать записи об изменении выпадающего списка .. пожалуйста, помогите

Answer 1

Это возможное решение:

В вашем CSS:

//CSS class to use on your option elements to make their display property none
.hiddenOption{
   display:none;
}

Если вы используете внешний Javascript-файл, который вы импортируете в View, или тег сценария в вашем представлении с JQuery, используйте document.ready, чтобы прикрепить событие изменения к раскрывающемуся списку вашей подкатегории:

//Use document.ready in JQuery to add change handler to drop down
$(document).ready(function(){
    $('#subCategory').on('change', function(){
         //Call your filtering function here
         FilterVenders();
    });
});

//Declare and define a function for doing the filtering in your external
//script or in your script tag of View
function FilterVenders(){
    //As I don't know what kind of logic you use to filter, you need to
    //Work on this portion
    const subCategoryValue = $('#subCategory').val();
    const subCategoryText = $('#subCategory option:selected').text();

    //Loop all the options in your drop down list and apply the class
    //which makes their display as none (hide the options)
    $('#subCategory > option').each(function(){
         //If the option is not to be displayed, add the class
         //This is where you need to step in and provide the filtering logic
         if(condition){
            //Check if option is already hidden, if not add the class to hide it
             if(!$(this).hasClass('hiddenOption')){
                 $(this).addClass('hiddenOption');
             }
          }else{
             //Check if option is hidden, if so, remove class to unhide it
             if($(this).hasClass('hiddenOption')){
                 $(this).removeClass('hiddenOption');
             } 
          }
     });
}