Как мне создать список так, как я хочу

У меня есть следующие сценарии:

Делает расчет за меня и перечисляет их

function fromPortIdChange() {
   fromportid = $('#fromPortId').val();
   console.log(fromportid);
   portIdRange(fromportid,toportid);
   listOfNumbers=[];
}

function toPortIdChange() {
   toportid = $('#toPortId').val();
   console.log(toportid);
   portIdRange(fromportid,toportid);
   listOfNumbers=[];
}

function portIdRange(fromportid, toportid) {
   fromportid = $('#fromPortId').val();
   toportid = $('#toPortId').val();
   fromportidlastvalueSliced = fromportid.slice(-5);
   interfaceNameLength = fromportid.length-1;
   interfaceName = fromportid.substring(0, interfaceNameLength);
   console.log("length: " +interfaceNameLength);
   console.log("interface name: " +interfaceName);
   fromportidlastvalue = fromportidlastvalueSliced.split('/')[2]
   console.log(fromportidlastvalue+ " FROM port id"); 
   console.log("range is " +fromportid+ " to " +toportid);
   toportidlastvalueSliced = toportid.slice(-5);
   toportidlastvalue = toportidlastvalueSliced.split('/')[2]
   console.log(toportidlastvalue+ " TO port id"); 
   console.log(typeof(toportidlastvalue));
   calculateRange(fromportidlastvalue, toportidlastvalue, interfaceName);
}

function calculateRange(fromportidlastvalue, toportidlastvalue, interfaceName) {
   fromportidlastvalue = parseInt(fromportidlastvalue);
   toportidlastvalue = parseInt(toportidlastvalue);
   console.log(fromportidlastvalue + " type is  " + typeof(fromportidlastvalue));
   console.log(toportidlastvalue + " type is  " + typeof(toportidlastvalue));
   currentValue = fromportidlastvalue;
   while(currentValue<=toportidlastvalue)
   {
      console.log(currentValue);
      listOfNumbers.push(interfaceName+currentValue);
      currentValue++;                
   }
   $('#port_range').val(listOfNumbers);
}

Вот соответствующий html:

Часть, которая находится на странице, и та, которую я собираюсь клонировать

<div id = first>
 <div class="port">
  <div class="row">
   <div class="col-md-4">
    <div class="form-group">
     <label for="subnet_bit">From Port ID</label>
      <select id="fromPortId" class="custom-select mb-3" onchange="fromPortIdChange();">
      <option selected>Select</option>
      {% for items in righttable %}
      <option value={{items.0}}>{{items.0}}</option>
      {%endfor%}
      </select>  
    </div>
   </div>
   <div class="col-md-4">
    <div class="form-group">
     <label for="subnet_bit">To Port ID</label>
      <select id="toPortId" class="custom-select mb-3" onchange="toPortIdChange();">
      <option selected>Select</option>
      {%for items in righttable%}
      <option value={{items.0}}>{{items.0}}</option>
      {%endfor%}
      </select>  
    </div>
   </div>
   <div class="col-md-1">
    <div class="form-group">
     <div class="text-sm-center">
     <br />
      <button type="button" class="btn btn-outline-success btn-rounded"><i class="dripicons-plus" onclick="addButton();"></i></button>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Дополнительный div, который я создал, чтобы клон находился в нем

<div id="morerows"></div>

Эта часть предназначена для текстовой области

<p style="color:red;">If certain interface not needed, delete it</p> 
<div class="row">
 <div class="col-md-10">
  <div class="form-group">
   <label for="port_range">Port range</label>
    <textarea class="form-control" id="port_range" rows="5"></textarea>
  </div>
 </div>
</div>

righttable происходит из моего представления django view

Этот скрипт делает следующее: Пользователь выбирает FortyGigabitEthernet2/0/1 из выпадающего списка From Port ID и FortyGigabitEthernet2/0/5 из выпадающего списка To Port ID, он перечислит все возможные интерфейсы в portrange, как показано на диаграмме, он перечисляет FortyGigabitEthernet2/0/1, FortyGigabitEthernet2/0/2,FortyGigabitEthernet2/0/3,FortyGigabitEthernet2/0/4,FortyGigabitEthernet2/0/5

Как вы можете видеть, сбоку есть кнопка добавления. Она предназначена для клонирования выпадающего окна, чтобы пользователь мог выбрать другие порты. Например, TenGigabitEthernet1/0/1 для клонированных From Port ID и TenGigabitEthernet1/0/3. Таким образом, следующий TenGigabitEthernet1/0/1, TenGigabitEthernet1/0/2, TenGigabitEthernet1/0/3 добавляется к существующему FortyGigabitEthernet2/0/1, FortyGigabitEthernet2/0/2,FortyGigabitEthernet2/0/3,FortyGigabitEthernet2/0/4,FortyGigabitEthernet2/0/5 в текстовой области Port Range

Для клонирования выпадающего окна:

function addButton(){
    $('#first .port').clone().appendTo('#morerows')
}

Вот и проблемы:

1. Кнопка добавления работает, но я не знаю, это лаг или что. Иногда мне приходится нажимать на кнопку добавления несколько раз, прежде чем появится клонированное выпадающее окно.

2. Клонированное выпадающее окно не работает так, как я хочу. Как на рисунке ниже. В 1-м ряду у нас есть FortyGigabitEthernet2/0/1 и Forty GigabitEthernet2/0/2. Они перечислены в Port Range. Но для 2-го ряда FortyGigabitEthernet2/0/4 и FortyGigabitEthernet2/0/5 они не перечислены в Port Range

Простите за очень длинный пост, но есть ли способ добиться того, что мне нужно. Буду признателен, если кто-нибудь сможет помочь. Заранее спасибо!

Вернуться на верх