Javascript-форум - Динамический список не динамический.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамический список не динамический. (https://javascript.ru/forum/dom-window/56008-dinamicheskijj-spisok-ne-dinamicheskijj.html)

Динамический список не динамический.

Доброго дня, друзья!
Делаю простенький калькулятор, точнее не могу сделать:) В JS новенький, не могу разобраться в чем дело:
Краткое пояснение:
При выборе "Пластиковый "Квадро"" в первом списке, должен пропадать "Транслюцентный баннер" во втором списке.
Отдельно "document.light_box.surface.options[2]=null;" - удаляется, а вот вместе с "if", что бы задать условие не работает.

<body>
<table width="600" align="center" class="light_box">
<colgroup><col width="210"><col width="390"></colgroup>
<tbody>
<form name="light_box">
<tr><td class="left">Профиль:</td>
<td><select id="profile" name="profile">
      <option selected="selected">Металлический</option>
      <option>Пластиковый "Квадро"</option>
      </select></td></tr>  
<tr><td align="left">Лицевая поверхность:</td>
<td><select name="surface">
      <option selected="selected">Акрил молочный (пленки)</option>
      <option>Акрил молочный (полноцветная печать)</option>
      <option>Транслюцентный баннер</option>
      <option>Сотовый поликорбанат (пленки)</option>
      <option>Сотовый поликорбанат (полноцветная печать)</option>
      </select></td></tr>
</form>
</tbody>
</body>

if (document.light_box.profile.options.selected==1) {
document.light_box.surface.options[2]=null;
}

Перепробовал и другие варианты, ничего не получается:

var objPro=document.light_box.profile;
var objSel=document.light_box.surface;
if (objPro.selectedIndex==objPro.options[1]) {
objSel.options[2]=null;
}

if (document.light_box.profile.options[1].selected==true) {
  document.light_box.surface.options[2]=null;
}

Друзья, если не затруднит подсказать правильный вариант или "где копать" пожалуйста ответьте. Заранее спасибо.

Продолжаю экспериментировать:

var objPro = document.getElementById("profile_id");
var objSel = document.getElementById("surface_id");
if (objPro.selectedIndex == 1) {
  objSel.options[2]=null;  
}

не работает.

Цитата:

Сообщение от oneplus

подсказать правильный вариант или "где копать"

Как вариант, сделать зависимую структуру из массивов и объектов... На основе этого создавать содержимое второго "зависимого" селекта...

Дополнение к первому посту

Спасибо, попробую разобраться с массивами и объектами. Если не трудно буду благодарен за похожие примеры, поскольку плохо представляю нужные массивы и объекты. Второй день гуглю, не могу найти ответа.:help:
В дополнение к первому посту:
Заметил следующее, код

var objPro = document.getElementById("profile_id");
var objSel = document.getElementById("surface_id");
if (objPro.selectedIndex == 1) {
objSel.options[2]=null; 
}

работает (на мой взгляд), но значения проверяет при старте страницы, то есть objPro.selectedIndex изначально [0], при последующем выборе уже условие "if" не проверяется.
Как заставить скрипт работать при каждом выборе?
Экспериментировал с "onchange",

<td><select id="profile" name="profile" onchange="this.options[this.selectedIndex]">
      <option selected="selected">Металлический</option>
      <option>Пластиковый "Квадро"</option>
      </select></td></tr>

, так понимаю с onchange скрипт должен срабатывать при каждом изменении (потере фокуса). Вариант также не увенчался успехом.

зависимые селекты

oneplus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form name="light_box">
<table width="600" align="center" class="light_box">
<colgroup><col width="210"><col width="390"></colgroup>
<tbody>

<tr><td class="left">Профиль:</td>
<td><select id="profile" name="profile">
      <option selected="selected">Металлический</option>
      <option>Пластиковый "Квадро"</option>
      </select></td></tr>
<tr><td align="left">Лицевая поверхность:</td>
<td><select name="surface" size="5">
      <option selected="selected">Акрил молочный (пленки)</option>
      <option>Акрил молочный (полноцветная печать)</option>
      <option>Транслюцентный баннер</option>
      <option>Сотовый поликорбанат (пленки)</option>
      <option>Сотовый поликорбанат (полноцветная печать)</option>
      </select></td></tr>

</tbody>
</table>
</form>
<script>
var s = document.querySelectorAll("select"),
    o = s[1].options,
    op = o[2];

function foo() {
    this.selectedIndex ? o.remove(2) : o.add(op, 2)
}
s[0].onchange = foo;
</script>



</body>


</html>

Огромное спасибо.

Огромное спасибо, работает!
Правильно ли понимаю?

var s = document.querySelectorAll("select"),//все списки
    o = s[1].options,//второй список, где будут происходить изменения
    op = o[2];//оптион, который будет удаляться
//а вот, что происходит дальше?
//"this.selectedIndex" - расшифруйте пожалуйста условие
//true - удаляем третий оптион, false - добавляем третий оптион во второй список
function foo() {
    this.selectedIndex ? o.remove(2) : o.add(op, 2)
}
//первый список при каждом изменении проверяется по функции?
s[0].onchange = foo;

Вообщем не хотелось бы вставлять безглядно код, прошу расшифровать обычном языком, что произошло, особенно в функции не понимаю \ не вижу условия "при выборе селект0 оптион1".
И второй вопрос, на странице, да и в самом калькуляторе будут еще селекты, а если добавить селектов (например селект перед), скрипт перестает работать корректно, можно ли привязать этот скрипт только к этим двум селектам, например по id?

Что не правильного в этом условии? Почему не возвращает оптион 2.

var objPro = document.getElementById("profile_id");
var objSel = document.getElementById("surface_id");
function foo() {
  (objPro.selectedIndex == 1) ? objSel.options.remove(2) : objSel.options.add(objSel.options[2],2)
}
objPro.onchange = foo;

Скрипт по началу работает как надо, но при обратном выборе оптион 2 не возвращает.
В html все id прописаны.

Цитата:

Сообщение от oneplus

//все списки

все селекты

Цитата:

Сообщение от oneplus

//второй список, где будут происходить изменения

NodeList опционов второго селекта
Пластиковый "Квадро this.selectedIndex == 1
Металлический - this.selectedIndex == 0 => this.selectedIndex уже ноль что даст false, сравнение с нулём и единицей опускаем, так как всего 2 опциона для выбора.

Цитата:

Сообщение от oneplus

Что не правильного в этом условии?

objSel.options.add(objSel.options[2],2) в этой строке нет опциона Транслюцентный баннер, потому что он уже отсутствует в селекте , а есть Сотовый поликорбанат (пленки) который благополучно вставляется на своё же место.
в моём случае он никуда не изчез, потому-то на него ссылается отдельная переменная.

var objPro = document.getElementById("profile_id");
var objSel = document.getElementById("surface_id");
var ops = objSel.options[2];
function foo() {
  (objPro.selectedIndex == 1) ? objSel.options.remove(2) : objSel.options.add(ops,2)
}
objPro.onchange = foo;

Благодарю, все понятно и доступно!
Сегодня открыл для себя новые горизонты:)
:thanks:

Сделайте еще одно открытие - транслюцентный это калька для дебилов, а по-русски говорят "просвечивающий". Это будет единственное, потому что ваш хардкор будет работать пока все условия в хардкоде совпадают с данными. Как только данные поменяются, добавится еще Трансцендентный баннер - пиндец, вам придется править свой хардкор. Уровень абстрации ниже плинтуса и самое печальное что некоторые профессора ничтоже сумняще его там и удерживают.

kostyanet,
вечно ты выдумываешь коня в вакуме, когда есть решение для одного обьекта, решить задачу с десятком можно без труда, распространив метод на нужные обьекты.

А я о чем написал? Добавится кубический конь к сферическому и полезет наш счастливый аффтар добавлять

o11 = s[11].options,
op22 = o[22];

Короче, все делается не так, но как делается - не делается долбоящерами. Они хардкодят.