Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2013, 00:07
Новичок на форуме
Отправить личное сообщение для Хоттабыч Посмотреть профиль Найти все сообщения от Хоттабыч
 
Регистрация: 21.08.2013
Сообщений: 4

Пользовательский элемент в 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
Именно "Добавление в конкретное место" как раз то, что нужно, только переделать для своих нужд у меня не получилось.
Надеюсь правильный раздел выбрал...
Заранее спасибо за помощь.

Последний раз редактировалось Хоттабыч, 22.08.2013 в 00:11.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2013, 04:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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];
}
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2013, 15:08
Новичок на форуме
Отправить личное сообщение для Хоттабыч Посмотреть профиль Найти все сообщения от Хоттабыч
 
Регистрация: 21.08.2013
Сообщений: 4

Эх, почти то, только забыл указать, что значение атрибута должно быть отличным от содержимого тега 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>


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

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

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

И, кстати, результат предыдущего примера:
Изображения:
Тип файла: png Ashampoo_Snap_2013.08.22_16h25m14s_002_.png (2.2 Кб, 1 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2013, 19:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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));
}
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2013, 22:35
Новичок на форуме
Отправить личное сообщение для Хоттабыч Посмотреть профиль Найти все сообщения от Хоттабыч
 
Регистрация: 21.08.2013
Сообщений: 4

Это то, что нужно. Только нет худа без добра. Если в значении (Свое значение *) поставлен перенос строки, то все портится...
Ответить с цитированием
  #6 (permalink)  
Старый 22.08.2013, 22:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

"Свое \n значение"
Ответить с цитированием
  #7 (permalink)  
Старый 22.08.2013, 23:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

danik.js,
на всякий случай
Сообщение от danik.js
while (select.length > 1) { select.remove(select.length - 1);}
===
select.options.length = 1;
Ответить с цитированием
  #8 (permalink)  
Старый 23.08.2013, 23:39
Новичок на форуме
Отправить личное сообщение для Хоттабыч Посмотреть профиль Найти все сообщения от Хоттабыч
 
Регистрация: 21.08.2013
Сообщений: 4

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Элемент select, событие change an.semionov jQuery 6 31.05.2012 22:28
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31
Пользовательский скрипт для выбора option в select по умолчанию justalittleperson Элементы интерфейса 1 04.10.2010 06:13