Форум

moslem · #1 (**permalink**) 10.11.2014, 14:53

Добрый день, столкнулся с такой проблемой, нужно сделать в форме следующее действия.

http://jsbin.com/wiroxevoki/1/edit?html,css,output

Вот сама форма, нужно сделать так, когда мы выбираем "Вопрос 1" в select id="subject" , появлялась select #price то есть у него становилось display: block;

Как можно подобное реализовать?

skrudjmakdak · #2 (**permalink**) 10.11.2014, 14:59

1. находишь свой select, например так: $('select[name=subject]')
2. навешиваешь событие onchange
3. ставишь условие, если значение равно "Вопрос 1", то находим второй селект (примерно как в первом пункте) и присваиваем block: $(...).css('display', 'block');

moslem · #3 (**permalink**) 10.11.2014, 15:23

skrudjmakdak, можешь посмотреть что за ошибки здесь допустил

$(function() {
    $('select[name=subject]').change(function () {
    if(select[name=subject].val() === "Вопрос 1") {
      $('#price').css("display", "block");
    }
    });
});

krutoy · #4 (**permalink**) 10.11.2014, 18:25

moslem, вот так попробуйте:

<!DOCTYPE html>
<html>
<head>
  <meta charset="windows-1251">
  <title>JS Bin</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <style>
    #price{display: none}
  </style>
</head>
<body>
<form action="/">
  <input type="text" placeholder="Имя"><br /><br />
  <input type="text" placeholder="Номер"><br /><br />
  <select name="subject" id="subject">
    <option>Выберите вопрос</option>
    <option>Вопрос 1</option>
    <option>Вопрос 2</option>
  </select><br /><br />
  <select name="price" id="price">
    <option>Вопрос 3</option>
    <option>Вопрос 4</option>
  </select><br /><br />
  <input type="submit" value="Send">
</form>
 <div></div>
<script>
price=document.querySelector("#price")
subject=document.querySelector("#subject")
subject.onchange=function(){
if(this.value==="Вопрос 1") price.style.display="block"
}
</script>
</body>
</html>

moslem · #5 (**permalink**) 10.11.2014, 20:23

krutoy,
спасибо то что нужно

Форум

Справочник

Discord чат

Курсы javascript