Соединение двух динамически созданных элементов выбора

Question

Я несколько застрял на этом, поэтому любая помощь будет принята с благодарностью.

В представлении настроек моего веб-приложения (Flask) мне нужно создать часть, в которой я должен соединить два элемента select, которые можно динамически добавлятьи удалено.

В основном мне нужно соединить элементы выбора в каждой строке, предпочтительно в качестве ключа: значение (1-й столбец, 2-й столбец),

Вот часть jquery и html, где я создаю и заполняю, выбирает:

$(document).ready(function() {
  $('.mul_field_wraper').each(function() {
    var $wrapper = $('.mul_fields', this);
    $(".add_select", $(this)).click(function(e) {
      var obj = $('.mul_field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').end().find('option').focus();
    });

    $('.mul_field .remove_field', $wrapper).click(function() {
      if ($('.mul_field', $wrapper).length > 1)
        $(this).parent('.mul_field').remove();
    });
  });
});

function changeName(elem) {
  elem.setAttribute('name', elem.value);
}

<div class="mul_field_wraper">
  <div class="mul_fields">
    <div class="mul_field">
      <select onchange="changeName(this);">{% for x in models %}
        <option value={{x[0]}}>{{x[0]}}</option>{% endfor %}</select>
      <select onchange="changeName(this);">{% for y in price %}
        <option value={{y[0]}}>{{y[1]}}</option>{% endfor %}</select>
      <button type="button" class="remove_field">Remove</button>
    </div>
  </div>
  <button type="button" class="add_select">Add field</button>
</div>

То, что я делаю прямо сейчас, - это изменение элемента, присвоение ему атрибута имени, аналогичного значению.Но что мне нужно сделать, это дать ему имя, совпадающее со значением соседнего элемента select.

Печать request.form, когда я POST, мое представление настроек дает мне такой вот что:

ImmutableMultiDict([('model1', u'model1'),('model2', u'model2'),('price2', u'price2'),('price1', u'price1'),('price3', u'price3'),('model3', u'model3')])

И с помощью dict, подобного этому, я не могу соединить модель1 с ценой1, модель2 с ценой2 и т. Д.игнорируйте дубликаты в python.

Опять же, любая помощь приветствуется, кстати.Есть ли лучший способ справиться с этим в целом?Как я могу подойти к этому лучше?

Answer 1

Я думаю, это было бы довольно легко сделать.Когда вы создаете два элемента select в строке, строка может находиться внутри одного тега div.

<div id='row'+fieldSet1>
    <coldiv>
        <select id='key'+fieldSet1>
        </select>
    </coldiv>
    <coldiv>
         <select id='value'+fieldSet1>
         </select>
    </coldiv>
</div>

Теперь, используя jQuery, вы можете выбрать конкретную строку div, поскольку вы использовали динамический 'fieldSet #' для ключа, а такжестрока, а затем получить значения в качестве пары ключ-значение и делать с ней что угодно.Я надеюсь, вы поняли идею.

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