All geek questions in one place

JQuery removing <option> tags that it should not remove

I have a number of dynamic <select> elements that are generated based on various user inputs. I am trying to remove specific <option> that are not applicable for each choice, but jQuery seems to remove more than <option> , then it should be removed based on my code. The full use case will be difficult to reproduce, so I will post what I see and hopefully it will be good enough to understand this.

To prove to myself that I'm not crazy, I decided to add a class instead of removing the <option> in the loop. Here is what I used:

 $('.my-select').each(function(sourceIdx,sourceEl){ var id = $(sourceEl).attr('id'); var s = $('#'+id).parents('table').find('.some-input').val(); $(sourceEl).find('option[value="'+s+'"]').addClass('option-remove'); });

Here's the generated source:

 <select class="my-select" id="1295453461993"> <option title="1" value="1">1</option> <option title="2" value="2" class="option-remove">2</option> <option title="3" value="3">3</option> </select> <select class="my-select" id="1295453475890"> <option title="1" value="1">1</option> <option title="2" value="2">2</option> <option title="3" value="3" class="option-remove">3</option> </select>

That is exactly what I want. However, when I add this immediately after the loop:

 $('.option-remove').remove();

I get this:

 <select class="my-select" id="1295454051124"> <option title="1" value="1">1</option> </select> <select class="my-select" id="1295454058398"> <option title="1" value="1">1</option> <option title="2" value="2">2</option> </select>

What makes me say: “Wait, WHAT ?!”. It seems that when jQuery removes the <option> in the second selection, it removes the same <option> (value = 3) from the first <select> . Not cool.

So what can I do wrong here?

I am testing FireFox 3.5 (same results in IE) using jQuery 1.4.4.

+4
source share
3 answers

A stripped-down, non-dynamic test case works fine:

 <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> </head> <body> <form> <select class="my-select" id="1295453461993"> <option title="1" value="1">1</option> <option title="2" value="2" class="option-remove">2</option> <option title="3" value="3">3</option> </select> <select class="my-select" id="1295453475890"> <option title="1" value="1">1</option> <option title="2" value="2">2</option> <option title="3" value="3" class="option-remove">3</option> </select> </form> <script> $('.option-remove').remove(); </script> </body> </html>

There must be something else going on ...

+2
source

Although I do not know the solution to your problem, I may have help. Perhaps this makes your life easier → https://github.com/SamWM/jQuery-Plugins/tree/master/selectboxes

I used it and it worked quite well. And this is not such a big plugin, so no big overhead.

0
source

$ (sourceEl) .find ('parameter [value = "' + S + '"]') addClass ('delete option') ;.

just curious what if you used this instead?

 $('#' + id).find('option ...

i.e. by id, not by the element passed to the function

or

 $('#' + id + '> option[value="'+s+'"}')

i.e. one big selector, not "find"

The second choice is created dynamically by copying html ()

Do you specify a unique identifier when copying?

0
source

Source: https://habr.com/ru/post/1336172/

More articles:


All Articles