Категория JQuery подкатегория abd Вложенные Drop Downs

Question

У меня есть 2 drop downs в Asp.Net MVC3.

1. Контроллер предоставляет список категорий, и я использую вызов Jquery Ajax к контроллеру метод категории и заполнение списка категорий в списке.

2. Контроллер дает список подкатегорий, и я использую вызов JQuery Ajax для метода подкатегории контроллера и заполняющий список подкатегорий в выпадающем списке.

Как заполнить su7bcategories на основе выбранной категории с помощью jquery? любая помощь будет оценена по достоинству.

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

Answer 1

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

Answer 2

<table> 
    <tr> 
     <td>Category 
     </td> 
     <td> 
      <select id="Category"></select> 
     </td> 
    </tr> 
    <tr> 
     <td>Subcategory 
     </td> 
     <td> 
      <select id="SubCategory"></select> 
     </td> 
    </tr> 
</table> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: '/ControllerName/GetAllCategory', type: 'Get', dataType: 'json', 
      success: function (data) { 
       var categoryObj = $('#Category'); 
       categoryObj.empty(); 
       $.each(data, function (i, entity) { 
        categoryObj.append('<option value="' + entity.Id + '">' + entity.Name + '</option>'); 
       }); 
      } 
     }); 

     $('#Category').change(function() { 
      $('#SubCategory').empty(); 
      if ($(this).val() != null && $(this).val() != 0) { 
       $.ajax({ 
        url: '/ControllerName/GetAllSubCategory', type: 'Get', dataType: 'json', 
        data: { CategoryId: $(this).val() }, 
        success: function (data) { 
         var subCategoryObj = $('#SubCategory'); 
         //subCategoryObj.empty(); 
         $.each(data, function (i, entity) { 
          subCategoryObj.append('<option value="' + entity.Id + '">' + entity.Name + '</option>'); 
         }); 
        } 
       }); 
      } 
     }); 
    }); 
</script>