Блог

Я использую ajax для каскадного выпадающего списка в моем asp.net проект mvc. Я добавлю код ниже #asset — это идентификатор выпадающего списка 1 #members — идентификатор выпадающего списка 2

 var $j = jQuery.noConflict();

$j(document).ready(function() {

  $("#asset").change(function() {
    debugger
    $.get("/Asset/Getmembers", {
      asset: $("#asset").val()
    }, function(data) {

      $("#members").empty();

      $.each(data, function(index, row) {

        $("#members").append($('<option></option>').attr('value', data[index].capacity).text(data[index].capacity));

      });
    });
  })
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  

Если я выберу ресурс, появится соответствующая емкость. Например, если выбран ресурс 1, в следующем выпадающем списке появится емкость для ресурса 1, скажем, 7.
Но мне нужно показать от 1 до 7 в раскрывающемся списке «Мои возможности»
Если актив 2 выбран, в следующем выпадающем списке будет указана емкость для актива 2, скажем, 6
Но мне нужно показать от 1 до 6 в раскрывающемся списке «Мои возможности»

Похоже, что ваш вызов API возвращает число, а не список чисел, поэтому вместо использования each for цикла try.

 for(var i=0;i<parseInt(data);i  )
{
 $("#members").append($('<option></option>').attr('value',i).text(i);
}
  

В соответствии с данными

 let assetdata = JSON.Parse({id: 3, asset: "Meeting room 1", capacity: 6, state: "Active"});
  

ссылка на приведенные выше данные

Шаг 1: Сначала вам нужно сохранить ограничения данных в отдельной переменной

 let assetid = assetdata.id;
let capacitylen = assetdata.capacity;
  

Шаг 2. Затем свяжите свой каскадный выпадающий список (Capcity) с требуемыми ограничениями:
Обратите внимание, измените цикл foreach

 for(let i= assetid ;i<= parseInt(capacitylen);assetid  )
{
    $("#members").append($('<option></option>').attr('value',assetid ).text(assetid);
}
  

Как насчет использования оператора распространения es6?

 const data = [
{asset: "Meeting room 1", capacity: 6},
{asset: "Meeting room 2", capacity: 10},
{asset: "Meeting room 3", capacity: 12}
]

// handle click and add class
$( document ).ready(function() {
    for (var item of data) {
  		$(`<option value="${item.capacity}">${item.asset}</option>`).appendTo($('#select1'));
		}
    
    $( "#select1" ).change(function() {
            $('#select2').empty().show();
        	 for (var item of [...Array(parseInt($(this).val())).keys()]) {
  						$(`<option value="${item   1}">${item   1}</option>`).appendTo($('#select2'));
						}
		});  
    
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
 <select id="select1"></select>
 <select id="select2" style="display: none;">
 </select>
</div>