Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Дезактивация пункта выпадающего списка (https://javascript.ru/forum/dom-window/43243-dezaktivaciya-punkta-vypadayushhego-spiska.html)

ANALGIN 28.11.2013 14:19

Дезактивация пункта выпадающего списка
 
Собираю жене на сайт калькулятор стоимости услуг на выпадающих меню.
Надо чтоб при выборе одного из пунктов в одном поле, переставало быть активно другое поле.
В простом примере - работает:
Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Каркулятор</title>
<meta http-equiv="Content-Type" content="text/html" />
      <script type="text/javascript">
      function calc() {
                        var type_a = document.getElementById("type_a");
                        if ( type_a.selectedIndex==3 ) {
                        document.getElementById('type_b').disabled=true;
                        } else {
                        document.getElementById('type_b').disabled=false;
                        }                        //** для отключения при выборе одного из нескольких пунктов typa_a ((type_a.selectedIndex==3) || (type_a.selectedIndex==2))
                        var type_b = document.getElementById("type_b");
                       
                        var result = document.getElementById("result");

                        var price = 0;
                        price = parseInt(type_a.value) + parseInt(type_b.value) ;

          result.innerHTML = price;
      }

      </script>

</head>
<body>
<select id="type_a" onchange="calc()">
                                  <option value="0">a</option>                               
                                  <option value="1">b</option>
                                  <option value="2">c</option>
                                  <option value="3">Вторая переменная отсутствует</option>
</select>
<select id="type_b" onchange="calc()">
                                  <option value="0">d</option>                               
                                  <option value="1">e</option>
                                  <option value="2">f</option>
</select>
<br/>
      <div><strong>Сумма переменных </strong> <span id="result">0</span></div>
</body>
</html>

...а начинаю применять к полной форме - борода:
Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>КАРКУЛЯТОР 2</title>
<meta http-equiv="Content-Type" content="text/html" />
      <script type="text/javascript">

    //** Функция подсчета стоимости*
      function calc() {
                        var type_work = document.getElementById("type_work");
                        if ( type_work.selectedIndex==200 ) {
                        document.getElementById("type_color").disabled=true;
                        } else {
                        document.getElementById("type_color").disabled=false;
                        }
                        //** var type_math = document.getElementById("type_math"); *
                        var type_franch = document.getElementById("type_franch");
                        var type_color = document.getElementById("type_color");                       
                        var type_art = document.getElementById("type_art");                       
                        var type_straz = document.getElementById("type_straz");                       
                        var type_dop = document.getElementById("type_dop");       
                        var type_lak = document.getElementById("type_lak");               
                        var result = document.getElementById("result");

                        var price = 0;

          result.innerHTML = price;
      }
                </script>

</head>
<body>
                        <h5><b>Калькулятор:</b><br/>
                                <select id="type_work" onchange="calc()">
                                  <option value="0">Вид работ</option>                               
                                  <option value="750" title="База, удлинение на форме, камуфлирующий гель и защита">Наращивание ногтей</option>
                                  <option value="550" title="База, камуфлирующий гель, защита">Покрытие ногтей гелем</option>
                                  <option value="550" title="">Коррекция(до 5 недель)</option>
                                  <option value="650" title="Или коррекция после другого мастера">Коррекция(более 5 недель)</option>
                                  <option value="750" title="Перехоженая, упущенная">Коррекция после другого мастера</option>
                                  <option value="650" title="База, удлинение на форме, прозрачный гель и защита">Экспресс-наращивание ногтей</option>
                                  <option value="450" title="До 5 недель">Экспресс-коррекция</option>
                                  <option value="400" title="База, 2 слоя цвета и защита">&quot;Евростандарт&quot;</option>
                                  <option value="200" title="База, два слоя цвета, защита">Покрытие ногтей гель-лаком</option>
                          </select>
                                <br/>
                               
                                <!-- <select id="type_math" onchange="calc()">
                                  <option value="0" title="">Класс материалов</option>                               
                                  <option value="0" title="">Продукция медиум класса PULSAR by CNI</option>
                                  <option value="150" title="">Продукция премиум класса CNI-NSP</option>
                                  <option disabled title="">Продукция медиум класса IRISK, RuNail</option>
                          </select>
                                <br/> -->
                                <select id="type_franch" onchange="calc()">
                                  <option value="0" title="">&quot;Французский маникюр&quot; не нужен</option>                               
                                  <option value="50" title="Одноцветный френч">&quot;Французский маникюр&quot; простой</option>
                                  <option value="100" title="Миллениум, растяжка,&quot;лунный&quot;, 2 и более цвета, радужный, &quot;литье&quot;, эффект кракелюра">&quot;Французский маникюр&quot; сложный</option>
                          </select>
                                <br/>
                                <select id="type_color" onchange="calc()">
                                  <option value="0" title="">Покрытие цветом не требуется</option>                               
                                  <option value="50" title="Покрытие всего ногтя одним цветом">Однотонное покрытие</option>
                                  <option value="100" title="Покрытие всего ногтя разными цветами">Покрытие два и более цвета</option>
                          </select>
                                <br/>
                                <select id="type_art" onchange="calc()">
                                  <option value="0" title="">Нейл-Арт (роспись, дизайн) не требуется</option>                               
                                  <option value="25" title="">Нейл-Арт на 1 ногте</option>
                                  <option value="50" title="">Нейл-Арт на 2 ногтях</option>
                                  <option value="75" title="">Нейл-Арт на 3 ногтях</option>
                                  <option value="100" title="">Нейл-Арт на 4 ногтях</option>
                                  <option value="125" title="">Нейл-Арт на 5 ногтях</option>
                                  <option value="150" title="">Нейл-Арт на 6 ногтях</option>
                                  <option value="175" title="">Нейл-Арт на 7 ногтях</option>
                                  <option value="200" title="">Нейл-Арт на 8 ногтях</option>
                                  <option value="225" title="">Нейл-Арт на 9 ногтях</option>
                                  <option value="250" title="">Нейл-Арт на 10 ногтях</option>
                          </select>
                                <br/>
                                <select id="type_straz" onchange="calc()">
                                  <option value="0" title="">Стразы не нужны</option>                               
                                  <option value="0" title="">1-10 страз</option>
                                  <option value="50" title="">11-30 страз</option>
                                  <option value="100" title="">31-50 страз</option>
                                  <option value="150" title="">51-100 страз</option>
                                  <option value="200" title="">Более 100 страз</option>
                          </select>
                                <br/>
                                <select id="type_dop" onchange="calc()">
                                  <option value="0" title="">Дополнительные работы не нужны</option>                               
                                  <option value="200" title="">Снятие геля</option>
                                  <option value="150" title="">Снятие &quot;Евростандарт&quot;</option>
                                  <option value="100" title="">Снятие гель-лака</option>
                          </select>
                                <br/>
                                <select id="type_lak" onchange="calc()">
                                  <option value="0" title="">Снимать лак не прийдется</option>                               
                                  <option value="20" title="">Потребуется снятие лака</option>
                          </select>
                                <br/>
      <div><strong>Стоимость работ:</strong> <span id="result">0</span> руб.</div>       
</body>
</html>

JS начал изучать 45 минут назад, так что могу не увидеть простейшую ошибку.

рони 28.11.2013 14:52

ANALGIN,
type_work.selectedIndex==200 --- у вас в селекторе 200 опций или может всётаки 9? и для кода html лучше

ANALGIN 28.11.2013 15:01

Цитата:

Сообщение от рони (Сообщение 283293)
ANALGIN,
type_work.selectedIndex==200 --- у вас в селекторе 200 опций или может всётаки 9? и для кода html лучше

От жеш! Спасибо, добрый человек!
Что то даже не подумал прочитать про свойства selectedIndex.


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