连接两个动态创建的选择元素

Question

我对此有点坚持，所以任何帮助将不胜感激。

在我的网络应用程序（Flask）设置视图中，我需要创建一个必须连接两个可以动态添加和删除的选择元素的部分。

我需要的基本上是连接每一行中的选择元素，最好是键：值（第一列，第二列）。

这是我创建和填充选择的 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>

我现在做的是改变元素，赋予它与值相同的名称属性。但我需要做的是给它命名为与相邻选择元素的值相同。

当我发布我的设置视图时打印 request.form 给我这样的字典：

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

像这样的字典我不能将model1与price1、model2与price2等配对..

我需要什么来实现与此类似的 dict：

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

我会忽略 python 中的重复项。

再次感谢任何帮助，顺便说一句。一般来说，有没有更好的方法来处理这个问题？我怎样才能更好地解决这个问题？

Answer 1

我认为这很容易做到。 当您在一行中创建两个选择元素时，该行可以在一个 div 标签内。

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

现在使用 jQuery，您可以选择特定的 div 行，因为您使用动态“fieldSet#”作为键和行，然后将值作为键值对获取并对其进行任何操作。我希望你能明白。

目前通过手机发布，因此无法测试和发布完整的工作代码。