remove the option selected in one dropdown list field and don't show in other dropdown list present in that...

I have a html table with multiple columns, in two columns i'm displaying the dropdown list. When user selects the value from one dropdown list(Select Product1
or Select Product2 dropdown list), i want to remove the option selected in one dropdown and dont show that option in the other dropdown list...

Below sample code works when the class name is same for all the dropdown list available in the table(Select Product1,Select Product2), but in my case
the class name for the dropdown list is same for each colum in the table which breaks the below code.

var $combo = $(".combo");

$combo.on("change", function () {

    var select = this,

        selected = $("option:selected", this).text();



    $combo.each(function (_, el) {

        if (el !== select) {

            $("option", el).each(function (_, el) {

                var $el = $(el);

                if ($(el).text() === selected) {

                    $el.remove();

                }

            });

        }

    });

});

Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

asked Nov 22 '18 at 0:00

user3684675

1251517

Demo has different code than what is shown in question?? Did you forget to do an update save in plunker?

– charlietfl
Nov 22 '18 at 0:07

add a comment |

var $combo = $(".combo");

$combo.on("change", function () {

    var select = this,

        selected = $("option:selected", this).text();



    $combo.each(function (_, el) {

        if (el !== select) {

            $("option", el).each(function (_, el) {

                var $el = $(el);

                if ($(el).text() === selected) {

                    $el.remove();

                }

            });

        }

    });

});

Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

asked Nov 22 '18 at 0:00

user3684675

1251517

Demo has different code than what is shown in question?? Did you forget to do an update save in plunker?

– charlietfl
Nov 22 '18 at 0:07

add a comment |

var $combo = $(".combo");

$combo.on("change", function () {

    var select = this,

        selected = $("option:selected", this).text();



    $combo.each(function (_, el) {

        if (el !== select) {

            $("option", el).each(function (_, el) {

                var $el = $(el);

                if ($(el).text() === selected) {

                    $el.remove();

                }

            });

        }

    });

});

Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

asked Nov 22 '18 at 0:00

user3684675

1251517

var $combo = $(".combo");

$combo.on("change", function () {

    var select = this,

        selected = $("option:selected", this).text();



    $combo.each(function (_, el) {

        if (el !== select) {

            $("option", el).each(function (_, el) {

                var $el = $(el);

                if ($(el).text() === selected) {

                    $el.remove();

                }

            });

        }

    });

});

Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

javascript jquery html

asked Nov 22 '18 at 0:00

user3684675

1251517

asked Nov 22 '18 at 0:00

user3684675

1251517

asked Nov 22 '18 at 0:00

user3684675

1251517

asked Nov 22 '18 at 0:00

user3684675

1251517

asked Nov 22 '18 at 0:00

user3684675

1251517

Demo has different code than what is shown in question?? Did you forget to do an update save in plunker?

– charlietfl
Nov 22 '18 at 0:07

add a comment |

Demo has different code than what is shown in question?? Did you forget to do an update save in plunker?

– charlietfl
Nov 22 '18 at 0:07

Demo has different code than what is shown in question?? Did you forget to do an update save in plunker?

– charlietfl
Nov 22 '18 at 0:07

add a comment |

1 Answer
1

active

oldest

votes

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {

  var $sel = $(this),

       val = $sel.val();



  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()



});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

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%2f53422117%2fremove-the-option-selected-in-one-dropdown-list-field-and-dont-show-in-other-dr%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

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {

  var $sel = $(this),

       val = $sel.val();



  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()



});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

add a comment |

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {

  var $sel = $(this),

       val = $sel.val();



  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()



});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

add a comment |

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {

  var $sel = $(this),

       val = $sel.val();



  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()



});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {

  var $sel = $(this),

       val = $sel.val();



  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()



});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

answered Nov 22 '18 at 0:15

charlietfl

139k1389122

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

add a comment |

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

Sorry, forgot to update the plunker with the code posted above. Please find the updated plunker with your code.plnkr.co/edit/1OCAW5U4YjJ9UasFmafl?p=preview . I see two challenges here. First one is as you said above if user selected one option in the dropdown list and again reselects the other option, the removed element is not showing back in the Select Product2 dropdown list. And other challenge is if user is selecting the option from Select Product2 dropdown list,the selected option is not removed from SelectProduct1 list as i'm including the code in $("select").change

– user3684675
Nov 22 '18 at 1:02

Maybe use $('#myTable select') then. I didn't look close at the classes in the html as I assumed your selector would include both. A common class on both sets would help

– charlietfl
Nov 22 '18 at 1:20

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

Search This Blog

Ufyukyu