Форум

oneplus · #1 (**permalink**) 25.05.2015, 13:51

Доброго дня, друзья!
Делаю простенький калькулятор, точнее не могу сделать

В 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;  
}

не работает.

ksa · #2 (**permalink**) 25.05.2015, 15:54

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

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

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

oneplus · #3 (**permalink**) 25.05.2015, 23:54

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

В дополнение к первому посту:
Заметил следующее, код

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 скрипт должен срабатывать при каждом изменении (потере фокуса). Вариант также не увенчался успехом.

рони · #4 (**permalink**) 26.05.2015, 01:05

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>

oneplus · #5 (**permalink**) 26.05.2015, 10:11

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

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 прописаны.

рони · #6 (**permalink**) 26.05.2015, 11:16

Сообщение от 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;

oneplus · #7 (**permalink**) 26.05.2015, 14:08

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

kostyanet · #8 (**permalink**) 26.05.2015, 14:20

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

рони · #9 (**permalink**) 26.05.2015, 14:44

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

kostyanet · #10 (**permalink**) 26.05.2015, 15:25

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

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

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

Форум

Справочник

Discord чат

Курсы javascript