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

Question

我对此有些困惑，因此非常感谢任何帮助。

在我的网络应用程序(Flask)设置 View 中，我需要制作一个部分，我必须在其中连接两个可以动态添加和删除的选择元素。

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

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

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

当我发布我的设置 View 时打印 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#”，然后获取值作为键值对并对其执行任何操作。我希望你明白了。

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