Отображение элементов внутренних форм

Question

Я принял форму, в которой есть тег select. И есть div, который отображается ничем. Поэтому я хочу, чтобы, если я выберу значение параметра saab, div должен отображаться. Так как я могу это сделать. Есть ли какой-либо путь к этому через php или jquery. Пожалуйста, помогите мне с этим. Я также попробовал сценарий для этого, но не смог.

<script> 
     $(document).ready(function(){ 
     $('#even').click(function(){ 
       $('#hqr').fadeIn(); 
      }); 
    }); 
    </script> 

Это правильный сценарий, чтобы сделать это или есть какая-то другая техника?

<form action="index1.html#!/registration"> 
<select> 
    <option value="volvo" >Volvo</option> 
    <option value="saab" id="even">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi" id="even">Audi</option> 
</select> 
<div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;"> 
</div> 
<input type="submit" value="submit"> 
</form> 

Answer 1

ID элемента должен быть уникальным таким образом, вместо того, чтобы использовать идентификатор можно использовать data-* свойство, чтобы указать элементы, которые необходимо отобразить hqr элемент.

Также вы должны слушать некоторых элементов изменить событие

<form action="index1.html#!/registration"> 
    <select id="select"> 
     <option value="volvo">Volvo</option> 
     <option value="saab" data-type="even">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi" data-type="even">Audi</option> 
    </select> 
    <div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;"></div> 
    <input type="submit" value="submit" /> 
</form> 

затем

$(document).ready(function() { 
    $('#select').change(function() { 
     if ($(this).find('option:selected').is('[data-type="even"]')) { 
      $('#hqr').fadeIn(); 
     } else { 
      $('#hqr').fadeOut(); 
     } 
    }).change(); 
}); 

Демо: Fiddle

---

Если вы хотите, чтобы отобразить hqr элемент базы на позиция опциона odd/event, то вы можете использовать easie г раствора, используя :nth-child(even) селектор вместо data-type="even"

<form action="index1.html#!/registration"> 
    <select id="select"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    <div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;"></div> 
    <input type="submit" value="submit" /> 
</form> 

затем

$(document).ready(function() { 
    $('#select').change(function() { 
     if ($(this).find('option:selected').is(':nth-child(even)')) { 
      $('#hqr').fadeIn(); 
     } else { 
      $('#hqr').fadeOut(); 
     } 
    }).change(); 
}); 

Демонстрация: Fiddle

Answer 2

Вместо того, ID = "даже" использовать класс = "даже"

и ваши JS должен быть таким

<script> 
     $(document).ready(function(){ 
     $('.even').click(function(){ 
      $('#hqr').fadeIn(); 
     }); 
     }); 
</script>