jQuery удаляет теги <option>, которые не должны быть удалены - PullRequest
Новая
       4

jQuery удаляет теги <option>, которые не должны быть удалены

4 голосов
/ 19 января 2011

У меня есть ряд динамических <select> элементов, которые генерируются на основе различных пользовательских данных. Я пытаюсь удалить некоторые <option>, которые не применимы для каждого выбора, но jQuery, кажется, удаляет больше <option>, чем его следует удалить на основе моего кода. Полный вариант использования будет трудно воспроизвести, поэтому я опубликую то, что вижу, и, надеюсь, этого будет достаточно, чтобы понять это.

Чтобы доказать себе, что я не сумасшедший, я решил добавить класс вместо удаления <option> в цикле. Вот что я использовал: 

$('.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');
});

Вот сгенерированный источник: 

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

Именно это я и ожидаю. Однако, когда я добавляю это сразу после цикла: 

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

Я получаю это: 

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

Что заставляет меня говорить: «Подожди, ЧТО ?!». выглядит , что когда jQuery удаляет <option> во втором выборе, он удаляет те же <option> (значение = 3) из первого <select>. Не круто.

Так что же я тут делаю не так?

Я тестирую в FireFox 3.5 (те же результаты в IE) с jQuery 1.4.4.

Ответы [ 3 ]

2 голосов
/ 19 января 2011

Ускоренный, не динамический тестовый пример работает нормально: 

<!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>

Должно быть что-то еще происходит ...

0 голосов
/ 19 января 2011

$ (sourceEl) .find ('option [value = "' + s + '"]'). AddClass ('option-remove');

просто любопытно, а если бы вы использовали это вместо этого? 

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

т.е. по идентификатору, а не по элементу, переданному в функцию

или 

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

т.е. один большой селектор, а не 'find'

Второй выбор создается динамически путем копирования html ()

, который вы даетеэто уникальный идентификатор при копировании?

0 голосов
/ 19 января 2011

Хотя я не знаю решения вашей проблемы, возможно, мне нужна помощь. Может быть, это сделает вашу жизнь проще -> https://github.com/SamWM/jQuery-Plugins/tree/master/selectboxes

Я использовал это, и оно работало довольно хорошо. И это не такой большой плагин, так что никаких больших накладных расходов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...