Форум

k_DizeL · #1 (**permalink**) 20.02.2015, 20:05

Имеется select. При выборе 0 - год; 1-4 года. 5 - лет.

<select onchange="onj()" id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
  <option value="5">Пять</option>
</select>
год<div id="padej"></div>

И JS, но получилось кохлозно из за небольших знаний JS

padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 1) ? padej.innerHTML = 'а' : 0;
padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 1) ? document.getElementById('padej').style.display = 'block' : 0; 
 padej = (parseInt(hosting.options[hosting.selectedIndex].value) == 0) ? document.getElementById('padej').style.display = 'none' : 0;

При нуле - год. От 1-3 окончание а (Года), а при выборе 5 другое слово (5 лет)
Этот код работает

Но хотелось бы нормальный код. Сделал так, потому что при выборе другого значения (0 или 5) окончание а остается.
Как сделать этот код рациональным?

kotlov-net · #2 (**permalink**) 20.02.2015, 20:42

В таком вот духе:

<html>
<head>
</head>
<body>

<select id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
</select>
год<div id="padej"></div>

<script>


hosting.onchange=function(){
 switch(this.value){
   case "0": padej.innerHTML="foo"; break
   case "1": padej.innerHTML="bar"; break
 }
}



</script>
 
</body>
</html>

k_DizeL · #3 (**permalink**) 20.02.2015, 23:04

Спасибо большое, но к сожалению Ваш вариант конфликтует (останавливает) выполнение другого скрипта - калькулятор. Который вытягивает из Value цену. Как нибудь реально это избежать?
Калькулятор такого вида:

function calc() {
  var price = 0;
  var hosting = document.getElementById("hosting");
  price += parseInt(hosting.options[hosting.selectedIndex].value);
  result.innerHTML = price;
 }

kotlov-net · #4 (**permalink**) 21.02.2015, 00:49

k_DizeL,
хз откуда она у Вас вызывается. Попробуйте вместо нее, типа

<html>
<head>
</head>

<body>

<select id="hosting">
  <option value="0">Ноль</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
  <option value="5">Пять</option>
</select>
год<div id="padej"></div>
<div id="result"></div>



<script>


hosting.onchange=function(){
 var n=(+this.value)
 padej.innerHTML=n
 padej.style.display= n? "block" : "none"
 result.innerHTML=(+result.innerHTML)+n
}


</script>


  
</body>
</html>

k_DizeL · #5 (**permalink**) 21.02.2015, 12:21

kotlov-net, а вызывается она вот так

<html><head></head><body>

<select onchange="calc()" id="hosting">
 <option value="0">1</option>
 <option value="1">2</option>
 <option value="2">3</option>
 <option value="3">4</option>
 <option value="4">5</option>
</select>

<span id="padej">год</span>

Итого: <span id="result">10</span>

<script>
function calc() {
  var price = 10;
  var hosting = document.getElementById("hosting");
  price += parseInt(hosting.options[hosting.selectedIndex].value);
  result.innerHTML = price;
 }
 
hosting.onchange=function(){
 var n=(+this.value)
 padej.innerHTML=n
 padej.style.display= n? "block" : "none"
 result.innerHTML=(+result.innerHTML)+n
}
}

</script>

</body></html>

k_DizeL · #6 (**permalink**) 22.02.2015, 14:26

Кто нибудь предложит другие варианты? Решение этой проблемы еще не найдено

Форум

Справочник

Discord чат

Курсы javascript