Как создать раскрывающийся список на JS?

Question

[Rostyk Ice]

Как создать раскрывающийся список на JavaScript для Usercript в Tempermonkey?

Answer 1

[DevMan]

Например, при помощи jQuery - jsfiddle.net/w5rky591
Можно и на ванильном JS (но смысла не вижу).

Comments

[Rostyk Ice]

Спасибо.
Добавил в скрипт появилась проблема, создало 13 копий на всей странице в разных местах.
Добавлял строку

$('#sf1').css("position", "absolute").css("top", 122).css("left", 260);

Дописал еще id="sf1" строке.

[Rostyk Ice]

Что с строкой что без одно и тоже.

[Rostyk Ice]

Оно добавило в каждый <div></div> добавило.

[DevMan]

Rostyk Ice: если вы получили 13 копий, значит у 13 элементов одинаковый селектор.
указывайте уникальный или фильтруйте.

[Rostyk Ice]

DevMan:

$('body').append('<input type="text" name="size1" id="s1" size="1" placeholder="роз1">')
  $("#s1").css("position", "absolute").css("top", 142).css("left", 350);
  $("#s1").on( "keyup",function () {
  $('[name="length"]').val($('[name="size1"]').val());
 });

Привел пример кода скрипта который не копируеться.
Я просто новичок и незнаю как зделать.

[Rostyk Ice]

DevMan: Поместил в $('body').append($(select));

[DevMan]

Rostyk Ice: код мне ни о чем не говорит.
jsfiddle.net/w5rky591/2 - пример как приатачить селект к одному элементу.

[Rostyk Ice]

DevMan: Спасибо!
А можно 1 пример когда нажимаю на 1 из вариантов приисходит действие

$('[name="product_category[]"][value=3896]').prop('checked', true);

нажатие на галочку.

[DevMan]

Rostyk Ice: jsfiddle.net/w5rky591/3

[Rostyk Ice]

DevMan: Нажатие на любой из вариантов из списка включает галочку.
Может вы не так поняли ?
v1 нажимает на галочку 222
v2 нажимает на галочку 333
v3 нажимает на галочку 444
v4 нажимает на галочку 3896

[DevMan]

Rostyk Ice: в самом примитивном варианте - jsfiddle.net/w5rky591/4
дальше давайте уже сами.

[Rostyk Ice]

DevMan: Спасибо!