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

Question

我对此有些坚持，因此不胜感激。

在我的Web应用程序的（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>

我现在要做的是更改元素，使它的name属性与value相同。但是我需要做的是给它一个名称，使其与相邻选择元素的值相同。

当我发布设置视图时，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等配对。

要达到类似的要求，我需要什么：

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

在哪里我会忽略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＃”，然后将值作为键值对进行了处理。希望您能明白。

当前通过电话发布，因此无法测试和发布完整的工作代码。