Connecting two dynamically created select elements

I am somewhat stuck on this so any help would be greatly appreciated.

In my web app's(Flask) settings view i need to make a part where i must connect two select elements which can be dynamically added and removed.

enter image description here

What i need is basically to connect the select elements in each row, preferably as key:value (1st column, 2nd column).

Here is the jquery and html part where i create and fill selects:

$(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>

What i do right now is on change of the element, giving it name attribute same as value. But what i need to do is give it name to be same as value of adjacent select element.

Print of request.form when i POST my settings view gives me dict like this:

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

And with dict like this i cant pair model1 with price1, model2 with price2 etc..

What i would need to achieve a dict simmilar to this:

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

Where i would ignore the duplicate in python.

Again any help is appreciated, btw. is there a better way to handle this in general? How can i approach this better?

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

add a comment |

I am somewhat stuck on this so any help would be greatly appreciated.

In my web app's(Flask) settings view i need to make a part where i must connect two select elements which can be dynamically added and removed.

enter image description here

What i need is basically to connect the select elements in each row, preferably as key:value (1st column, 2nd column).

Here is the jquery and html part where i create and fill selects:

$(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>

What i do right now is on change of the element, giving it name attribute same as value. But what i need to do is give it name to be same as value of adjacent select element.

Print of request.form when i POST my settings view gives me dict like this:

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

And with dict like this i cant pair model1 with price1, model2 with price2 etc..

What i would need to achieve a dict simmilar to this:

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

Where i would ignore the duplicate in python.

Again any help is appreciated, btw. is there a better way to handle this in general? How can i approach this better?

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

add a comment |

I am somewhat stuck on this so any help would be greatly appreciated.

In my web app's(Flask) settings view i need to make a part where i must connect two select elements which can be dynamically added and removed.

enter image description here

What i need is basically to connect the select elements in each row, preferably as key:value (1st column, 2nd column).

Here is the jquery and html part where i create and fill selects:

$(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>

What i do right now is on change of the element, giving it name attribute same as value. But what i need to do is give it name to be same as value of adjacent select element.

Print of request.form when i POST my settings view gives me dict like this:

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

And with dict like this i cant pair model1 with price1, model2 with price2 etc..

What i would need to achieve a dict simmilar to this:

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

Where i would ignore the duplicate in python.

Again any help is appreciated, btw. is there a better way to handle this in general? How can i approach this better?

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

I am somewhat stuck on this so any help would be greatly appreciated.

In my web app's(Flask) settings view i need to make a part where i must connect two select elements which can be dynamically added and removed.

enter image description here

What i need is basically to connect the select elements in each row, preferably as key:value (1st column, 2nd column).

Here is the jquery and html part where i create and fill selects:

$(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>

What i do right now is on change of the element, giving it name attribute same as value. But what i need to do is give it name to be same as value of adjacent select element.

Print of request.form when i POST my settings view gives me dict like this:

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

And with dict like this i cant pair model1 with price1, model2 with price2 etc..

What i would need to achieve a dict simmilar to this:

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

Where i would ignore the duplicate in python.

Again any help is appreciated, btw. is there a better way to handle this in general? How can i approach this better?

$(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>

$(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>

javascript python jquery html flask

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

edited Jan 1 at 19:20

HynekS

4921514

edited Jan 1 at 19:20

HynekS

4921514

edited Jan 1 at 19:20

HynekS

4921514

asked Jan 1 at 19:13

pythonore

226

asked Jan 1 at 19:13

pythonore

226

asked Jan 1 at 19:13

pythonore

226

add a comment |

1 Answer
1

active

oldest

votes

I think that would be fairly easy thing to do.
When you create two select element in a row the row can be inside one div tag.

<div id='row'+fieldSet1>

    <coldiv>

        <select id='key'+fieldSet1>

        </select>

    </coldiv>

    <coldiv>

         <select id='value'+fieldSet1>

         </select>

    </coldiv>

</div>

Now using jQuery you can select the specific div row because you used dynamic ‘fieldSet#' for key as well as row and then get the values as key value pair and do whatever with it. I hope you get the idea.

Currently posting from phone so cannot test and post a full working code.

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998228%2fconnecting-two-dynamically-created-select-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I think that would be fairly easy thing to do.
When you create two select element in a row the row can be inside one div tag.

<div id='row'+fieldSet1>

    <coldiv>

        <select id='key'+fieldSet1>

        </select>

    </coldiv>

    <coldiv>

         <select id='value'+fieldSet1>

         </select>

    </coldiv>

</div>

Currently posting from phone so cannot test and post a full working code.

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

add a comment |

I think that would be fairly easy thing to do.
When you create two select element in a row the row can be inside one div tag.

<div id='row'+fieldSet1>

    <coldiv>

        <select id='key'+fieldSet1>

        </select>

    </coldiv>

    <coldiv>

         <select id='value'+fieldSet1>

         </select>

    </coldiv>

</div>

Currently posting from phone so cannot test and post a full working code.

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

add a comment |

I think that would be fairly easy thing to do.
When you create two select element in a row the row can be inside one div tag.

<div id='row'+fieldSet1>

    <coldiv>

        <select id='key'+fieldSet1>

        </select>

    </coldiv>

    <coldiv>

         <select id='value'+fieldSet1>

         </select>

    </coldiv>

</div>

Currently posting from phone so cannot test and post a full working code.

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

I think that would be fairly easy thing to do.
When you create two select element in a row the row can be inside one div tag.

<div id='row'+fieldSet1>

    <coldiv>

        <select id='key'+fieldSet1>

        </select>

    </coldiv>

    <coldiv>

         <select id='value'+fieldSet1>

         </select>

    </coldiv>

</div>

Currently posting from phone so cannot test and post a full working code.

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

answered Jan 1 at 19:33

Ciasto piekarz

2,36943495

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

add a comment |

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

Could you elaborate more please?

– pythonore
Jan 2 at 7:31

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk