Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Пользовательский элемент в select (https://javascript.ru/forum/events/40853-polzovatelskijj-ehlement-v-select.html)

Хоттабыч 22.08.2013 00:07

Пользовательский элемент в select
 
Есть код вида
<td id="id1" class="class1"><select size="1" style="width: 100%;"><option value="Текст">Текст</option>
...
</select></td>


В него необходимо добавить свой тег option с такими же атрибутами, только другими значениями.
Также очень желательно удалить существующие теги option.

Чтобы было совсем понятно, покажу сразу "на пальцах":
Есть часть кода:
<td id="id1" class="class1"><select size="1" style="width: 100%;">
<option value="Текст">Текст</option>
<option value="Текст2">Текст2</option>
<option value="Текст3">Текст3</option>
<option value="Текст4">Текст4</option>
<option value="Текст5">Текст5</option>
</select></td>


Необходимо сделать при помощи скриптов следующее:
<td id="id1" class="class1"><select size="1" style="width: 100%;">
<option value="Текст">Текст</option>
<option value="Свой текст2">Свой текст2</option>
<option value="Свой текст3">Свой текст3</option>
<option value="Свой текст4">Свой текст4</option>
</select></td>


Эта часть кода находится на стороннем сайте, его необходимо заменить на собственный при помощи расширения.
В общем, очень надеюсь на помощь, ибо я больше ничего не могу придумать. Самое похожее, что смог найти, это: http://javascript.ru/tutorial/dom/mo...nkretnoe-mesto
Именно "Добавление в конкретное место" как раз то, что нужно, только переделать для своих нужд у меня не получилось.
Надеюсь правильный раздел выбрал...
Заранее спасибо за помощь.

danik.js 22.08.2013 04:25

var select = document.querySelector('#id1 select');
var text = ['Текст', 'Свой текст2', 'Свой текст3'];
for (var i = 0, option; option = select.options[i]; i++) {
    option.textContent = option.value = text[i];
}

Хоттабыч 22.08.2013 15:08

Вложений: 1
Эх, почти то, только забыл указать, что значение атрибута должно быть отличным от содержимого тега option.

В общем, если можно ещё, то надо из этого:
<td id="id1" style="" class="class1"><select size="1" style="width: 100%;">
<option value="">Выбрать</option>
<option value="Существующее значение">Не измененный отображаемый текст-пояснение</option>
<option value="Существующее значение два">Не измененный отображаемый текст-пояснение два</option>
<option value="Существующее значение три">Не измененный отображаемый текст-пояснение три</option>
<option value="Существующее значение четыре">Не измененный отображаемый текст-пояснение четыре</option>
<option value="Существующее значение пять">Не измененный отображаемый текст-пояснение пять</option>
<option value="Существующее значение шесть">Не измененный отображаемый текст-пояснение шесть</option>
</select></td>


Необходимо сделать следующее:
<td id="id1" style="" class="class1"><select size="1" style="width: 100%;">
<option value="">Выбрать</option>
<option value="Своё значение">Свой отображаемый текст-пояснение</option>
<option value="Своё значение два">Свой отображаемый текст-пояснение два</option>
<option value="Своё значение три">Свой отображаемый текст-пояснение три</option>
</select></td>


Все значения и содержимое тегов полностью отличаются друг от друга.
Надо скрипт что-то типа такого:
Удалить существующие значения и содержимое;
Вставить собственные значения и содержимое

Да, это звучит, может, немного смешно, но типа такого и надо.

Как-то так, что ли...

И, кстати, результат предыдущего примера:

danik.js 22.08.2013 19:54

var select = document.querySelector('#id1 select');
var options = {
    'Свое значение 1': 'Текст1',
    'Свое значение 2': 'Текст2',
    'Свое значение 3': 'Текст3',
};

while (select.length > 1) {
    select.remove(select.length - 1);
}

for (var value in options) {
    select.appendChild(new Option(options[value], value));
}

Хоттабыч 22.08.2013 22:35

Это то, что нужно. Только нет худа без добра. Если в значении (Свое значение *) поставлен перенос строки, то все портится...

danik.js 22.08.2013 22:54

"Свое \n значение"

рони 22.08.2013 23:04

danik.js,
на всякий случай
Цитата:

Сообщение от danik.js
while (select.length > 1) { select.remove(select.length - 1);}

===
select.options.length = 1;

Хоттабыч 23.08.2013 23:39

Цитата:

Сообщение от danik.js
Свое \n значение

Да уж...

Я, пожалуй, осмелюсь ещё написать одну просьбу.
Дело в том, что скрипт не всегда срабатывает при загрузке страницы. Сначала грешил на расширение, а только потом подумал, что скрипт, скорее всего, выполняется раньше полной загрузки страницы.

Можно сделать так, чтобы он постоянно выполнялся с определенным интервалом, например, одна секунда, если это не слишком мало? Можно, конечно, что-то посложнее, только это будет ещё дольше. После полной загрузки страницы одноразово тоже не подходит.
И можно ли этот скрипт заодно привязать к классу ячейки таблицы?
В некоторых местах, как оказалось, идентификатор другой.


Часовой пояс GMT +3, время: 17:19.