Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как добавить опцию к списку


Автор: Vidocq 8.9.2005, 13:40
Код

fucntion send(sel)
{
var oOption = document.createElement("OPTION");
sel_illness.options.add(oOption);

var selectedOption = sel.options[sel.selectedIndex];
oOption.innerText = selectedOption.value;
oOption.value = "2";
}


Код

<html>
<body>
<SELECT ID="Illness" SIZE=4 WIDTH=200 onclick="send(this)">
    <OPTION VALUE="0">Illness_1</OPTION>
    <OPTION VALUE="1">Illness_2</OPTION>
</SELECT>
<BR>
<SELECT ID="sel_illness" SIZE=5  WIDTH=200>
    <OPTION>Selected Illnesses</OPTION>
</SELECT>
</body>
</html>

Автор: diam 8.9.2005, 14:31
Я не понимаю задачи, но вижу некоторые непонятные для меня моменты:
1. Откуда взялся sel_illness в коде JavaScript? Объявлен вне функции send()?
2. Строчка oOption.innerText = selectedOption.value; содержит innerText, который лучше заменить на oOption.text.
3. Когда мы добавляем ещё одну опцию в элемент SELECT (делаем последней опцией), нужно учесть, что это делается dom'овским методом add, причём для IE вторым аргументом должно быть число, а для Gecko - null (опере, по барабану), поэтому делаем это так:
Код

// получаем элемент SELECT
var sel_illnest = document.getElementById("sel_illnest");

// создаём опцию
var opt = document.createElement("OPTION");
opt.text = "Текст опции";
opt.value = "2";

if (document.all) {
  // для осла и оперы
  sel_illnest.add(opt, sel_illnest.options.length);
} else {
  // для остального цивилизованного мира :)
  sel_illnest.add(opt, null);
}

Автор: Vidocq 8.9.2005, 14:51
2 diam
1) Сделал по аналогии с
Код

<SELECT ID="oSelect">
  <OPTION VALUE="1">One</OPTION>
</SELECT>

<script>
var oOption = document.createElement("OPTION");
oSelect.options.add(oOption);
oOption.innerText = "Two";
oOption.value = "2";
</SCRIPT>



А задача всё та же smile - перемещать option'ы одного селекта в другой селект

PS код был взят с http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/add.asp

Автор: Vidocq 8.9.2005, 15:07
Line 25, char 1, Object expected (в ИЕ) в коде. ФайрФокс и опера молчат
Код


<html>
<head>

<script language="javascript">
fucntion send(sel)
{
// получаем элемент SELECT
var sel_illnest = document.getElementById("sel_illnest");
// create option
var opt = document.createElement("OPTION");
opt.text = "sometext";
opt.value = "2";
if (document.all) {
  // for IE and Opera
  sel_illnest.add(opt, sel_illnest.options.length);
} else {
  // for the rest
  sel_illnest.add(opt, null);
}
}
</script>

</head>
<body>
<SELECT ID="Illness" SIZE=4 WIDTH=200 ondblclick="send(this)">
    <OPTION VALUE="0">Illness_1</OPTION>
    <OPTION VALUE="1">Illness_2</OPTION>
</SELECT>
<BR>
<SELECT ID="sel_illness" SIZE=5  WIDTH=200>
    <OPTION>Selected Illnesses</OPTION>
</SELECT>
</body>
</html>

Автор: Sardar 8.9.2005, 15:40
Vidocq если ты пользуешся DOM'овскими методами document.createElement, то почему опцию добавляешь через add? smile

Подсказка: либо new Option -> add, либо document.createElement -> appendChild.

Автор: Vidocq 8.9.2005, 15:48
Sardar

Цитата

либо new Option -> add, либо document.createElement -> appendChild.


Можно пример, пожалуйста?..

Автор: Aliance 8.9.2005, 16:35
Vidocq
И обращайся к Id не на прямую, а, как правильно написал diam, через document.getElementById!

Цитата(Vidocq @ 8.9.2005, 16:48)
Можно пример, пожалуйста?..

Код

var select = document.createElement("SELECT");
document.body.appendChild(select);


В этом направлении, только добавлять нужно option`ы -> нужно назначить ID select`у и вызывать метод appendChild для него.

Автор: Vidocq 8.9.2005, 17:26
Это похоже на правду?
Код

<html>
<head>

<script language="javascript">
fucntion send(sel)
{
var sel_illness = document.getElementById("sel_illness");
var opt = document.createElement("OPTION");
opt.text = "SomeText";
opt.value = "2";
document.sel_illness.appendChild(opt);
}
</script>

</head>
<body>
<SELECT ID="Illness" SIZE=4 WIDTH=200 ondblclick="send(this)">
    <OPTION VALUE="0">Illness_1</OPTION>
    <OPTION VALUE="1">Illness_2</OPTION>
</SELECT>
<BR>
<SELECT ID="sel_illness" SIZE=5  WIDTH=200>
    <OPTION>Selected Illnesses</OPTION>
</SELECT>
</body>
</html>

Автор: Aliance 8.9.2005, 18:00
Да, только у объекта Select нет события ondblclick, зато есть onchange

Автор: Vidocq 8.9.2005, 18:19
Всё равно: Line 17, Char 1, Object expected, Code 0 (IE 6) В файрфоксе никаких ошибок нет, но и работы тоже нет smile
Код

<html>
<head>

<script language="javascript">
fucntion send(sel)
{
var sel_illness = document.getElementById("sel_illness");
var opt = document.createElement("OPTION");
opt.text = "SomeText";
opt.value = "2";
document.sel_illness.appendChild(opt);
}
</script>

</head>
<body>
<SELECT multiple="multiple" ID="Illness" WIDTH="200" onchange="send(this)">
    <OPTION VALUE="0">Illness_1</OPTION>
    <OPTION VALUE="1">Illness_2</OPTION>
</SELECT>
<BR>
<SELECT ID="sel_illness" SIZE="5"  WIDTH="200">
    <OPTION>Selected Illnesses</OPTION>
</SELECT>
</body>
</html>

Автор: o.s.a. 8.9.2005, 20:40
Опечатка в 5 строчке function send(sel)
А также в 10 строчке: document здесь не нужен: sel_illness.appendChild(opt);

Автор: Sardar 9.9.2005, 00:19
Vidocq млин, ну привыкни ты смотреть в консоль браузера, что за ошибку говорит smile
Рабочий код:
Код
<html>
<head>
<script type="text/javascript">
function send(sel) {
  var sel_illness = document.getElementById("sel_illness");
  var opt = document.createElement("option");
  opt.appendChild(document.createTextNode("SomeText"));
  opt.value = "2";
  sel_illness.appendChild(opt);
}
</script>
</head>
<body>
<select multiple="multiple" id="illness" width="200" onchange="send(this)">
    <option value="0">illness_1</option>
    <option value="1">illness_2</option>
</select>
<br>
<select id="sel_illness" size="5"  width="200">
    <option>selected illnesses</option>
</select>
</body>
</html>

Автор: Vidocq 9.9.2005, 10:36
2Sardar
"Идиот! - Согласен" (с) к/ф Операция Ы
так смотрю ж ведь... только вижу фигу обычно smile smile
(работает)
Код

function send(sel)
{
var sel_illness = document.getElementById("sel_illness");
var opt = document.createElement("OPTION");
opt.text = "SomeText";
opt.value = "2";
sel_illness.appendChild(opt);
}

Автор: Vidocq 9.9.2005, 11:21
Вопрос из области теории.
Код

function send(sel)
{
var selectedOption = sel.options[sel.selectedIndex];

var sel_illness = document.getElementById("sel_illness");
var opt = document.createElement("OPTION");
opt.text = selectedOption.text;
opt.value = selectedOption.value;
sel_illness.appendChild(opt);

}


Вот эта функция реально записывает option из одного селекта в другой или просто отображает текст option'a в нужном селекте? Другими словами, смогу ли я потом передавать option'ы (добавленные из первого селекта), к примеру, в запросы? И будет ли эта функция работать ИЕ?

PS Сейчас скрипт работает во всех браузерах, кроме ИЕ %). Это ожидаемое поведение?

Автор: Sardar 9.9.2005, 13:34
Цитата(Vidocq @ 9.9.2005, 10:21)
Вот эта функция реально записывает option из одного селекта в другой или просто отображает текст option'a в нужном селекте?

Ты по настоящему создаёшь элемент option, который добавляешь в select, никакого текста, всё обьекты smile

Цитата(Vidocq @ 9.9.2005, 10:21)
PS Сейчас скрипт работает во всех браузерах, кроме ИЕ %). Это ожидаемое поведение?

Найди разницу между твоим кодом и моим. Подсказка: глянь на IDL описание http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-70901257.

Если не понял: свойство text только для чтения.

Автор: Vidocq 9.9.2005, 14:09
2Sardar,
а как же тогда c ИЕ быть, если в option.text писать нельзя? %) Вон в Опере и Мозилле/Файрфоксе можно. Так ведь большинство-то пользователей инета в ИЕ серфит... Есть какой-то выход?

Автор: Sardar 9.9.2005, 14:30
Повторяю посмотри на мой код. Запусти в ИЕ. Подключи глаза к работе, настой обращение к мозгу на 100% smile

Автор: Vidocq 9.9.2005, 14:39
2 Sardar. я постараюсь smile

Автор: Vidocq 9.9.2005, 15:52
Итак, наконец-то я разобрался, что надо было сделать, чтобы заставить списки делать то, что мне нужно smile smile smile (во загнул)
Окончательный вариант кода выглядит так:
Код

function sendRight(sel)
{
var selectedOption = sel.options[sel.selectedIndex];
var sel_illness = document.getElementById("sel_illness");
var all_illness = document.getElementById("all_illness");
var opt = document.createElement("OPTION");
//opt.text = selectedOption.text;
opt.appendChild(document.createTextNode(selectedOption.text));
opt.value = selectedOption.value;
sel_illness.appendChild(opt);
all_illness.removeChild(selectedOption);
}

function sendLeft(sel)
{
var all_illness = document.getElementById("all_illness");
var selectedOption = sel.options[sel.selectedIndex];
var opt = document.createElement("OPTION");
//opt.text = selectedOption.text;
opt.appendChild(document.createTextNode(selectedOption.text));
opt.value = selectedOption.value;
all_illness.appendChild(opt);

var sel_illness = document.getElementById("sel_illness");
var selectedOption = sel.options[sel.selectedIndex];
sel_illness.removeChild(selectedOption);
}


Код

<html>
<head>
</head>
<body>
<table>
<tr>
    <td>
    <SELECT ID="all_illness" size="7" style="width:180px" multiple="multiple"  onchange="sendRight(this)">
      <OPTION value="17138879000001">11111111</OPTION>
      <OPTION value="17138489000001">12121212</OPTION>
      <OPTION value="17131889000001">3435678</OPTION>
      <OPTION value="17205700000001">45645645</OPTION>
      <OPTION value="17205687000001">98798793</OPTION>
    </SELECT>
    </td>
    
<td>
<SELECT size="7" ID="sel_illness" style="width:180px" multiple="multiple" onchange="sendLeft(this)">
</SELECT>
</td>
</tr>
</table>

</tr>
</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)