mvc 5 jquery скрыть или показать элемент управления или div на основе выделения из выпадающего списка

Question

Я хочу показать и скрыть div или элемент управления, если это возможно, используя jquery. Я новичок в jquery и нуждаюсь в некоторой помощи. У меня это ниспадающее меню

   @Html.DropDownListFor(model => model.TestType , null, htmlAttributes: new { @class = "form-control"}) 

и это Див

 <div class="divqs"> 
     <div class="form-group" > 
      @Html.LabelFor(model => model.QuestionSet, "QuestionSet", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("QuestionSet", null, htmlAttributes: new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.QuestionSet,"" , new { @class = "text-danger" }) 
      </div> 
     </div> 
    </div> 

сценарий я написал это

$(document).ready(function ({ 
$('.ts').change(function(){ 
if ($(this).val() == 'Question Set') 
{ $('.divqs').hide();} 
else 
{ $('.divqs').show();}; 
}); 
}); 

Но я получаю проблему отображения страницы. Я получаю сообщение об ошибке «Ошибка выполнения скрипта jajva:« $ »не определено». Я думал, что это проблема с пакетом jquery, который не включен, но когда я проверяю пакеты, они есть. В чем может быть проблема?

Answer 1

Вам необходимо добавить ссылку на библиотеку JQuery на веб-странице

http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 2

Проблема заключается в том, что вы пытаетесь использовать JQuery, не включая его в зависимости от вашего HTML. Перед тем, как попытаться использовать его, вы должны включить библиотеку JQuery. Лучше всего сделать это с CDN:

Answer 3

Ваш DropDown должен выглядеть следующим образом

@Html.DropDownListFor(model => model.TestType , null, htmlAttributes: new { @class = "form-control" , id="mydropdown"}) 

и в вашем Jquery

$(document).ready(function ({ 
$('#mydropdown').change(function(){ 
if ($(this).val() == 'Question Set') 
{ $('.divqs').hide();} 
else 
{ $('.divqs').show();}; 
}); 
}); 

Вы всегда должны пытаться использовать уникальные идентификаторы для управления элементные события ...

Answer 4

В коде есть пара проблем.

В коде вы предоставили:

$(document).ready(function ({ 
$('.ts').change(function(){ 
    if ($(this).val() == 'Question Set') 
    { 
     $('.divqs').hide();} 
    else 
    { 
     $('.divqs').show();}; 
    }); 
}); 

Где элемент в вашем HTML, который имеет имя класса .ts?

Таким образом, в вашем HTML/Бритва вам нужно изменить эту строку:

@Html.DropDownList("QuestionSet", null, htmlAttributes: new { @class = "form-control" }) 

To:

@Html.DropDownList("QuestionSet", null, htmlAttributes: new { @class = "form-control ts" }) 

Кроме того, причина, почему вы получаете ошибку

'$' is undefined

- это потому, что вы не ссылались на jQuery в своем HTML-файле, или, по крайней мере, вы не ссылались на него правильно.

Answer 5

Он сейчас работает Я добавил этот @ Scripts.Render ("~/Scripts/JQuery-1.10.2.js")