1

jquery からスライドダウン効果を適用して、フォーム フィールドの非表示の div を表示するのに問題があります。選択ドロップダウンから特定の値が選択されている場合、フォーム フィールドの各セットを表示しようとしています。

脚本：

$(document).ready(function(){
       $("#role").change(function(){
        if ($("#role").val() == "student" ){ 
            $(".hide1").slideDown("fast"); //Slide Down Effect
        } else {
            $(".hide1").slideUp("fast");    //Slide Up Effect
        }
        if ($("#role").val() == "faculty" ) {
            $(".hide2").slideDown("fast"); //Slide Down Effect
        } else {
            $(".hide2").slideUp("fast");    //Slide Up Effect 
        }
         if ($("#role").val() == "alumni" ) {
            $(".hide3").slideDown("fast"); //Slide Down Effect 
        } else {
             $(".hide3").slideUp("fast");    //Slide Up Effect
        }});
});

HTML:

<form id="myform" class="form-control">
  <select name = "role" class = "btn btn-primary" id ="role">:
    <option>Role</option>
    <option value = "student"> Student </option>
    <option value = "faculty"> Faculty/Staff </option>
    <option value = "alumni"> Alumni </option>
  </select>
  <br/><br/><br/><br/><br/><br/>
  <div class="hide" id ="hide1">
    <label for="address">Campus Address:</label>
    <input type="text" id = "campadd" name="campadd" class= "form-control"/>
    <label for="Major">Major:</label>
    <input type="text" id = "major" name="major" class= "form-control"/>
  </div>
  <div class="hide" id = "hide2">
    <label for="department">Department:</label>
    <input type="text" id = "dept" name="dept" class= "form-control"/>
    <label for="location">Location:</label>
    <input type="text" id = "locations" name="location" class= "form-control"/>
  </div>
  <div class="hide" id ="hide3">
    <label for="graduationdate">Graduation Year:</label>
    <input type="text" id = "gradyear" name="gradyear" class= "form-control"/>
    <label for="Major">Degree:</label>
    <input type="text" id = "degree" name="degree" class= "form-control"/>
  </div>
  <br/>
</form>
4

1 に答える 1

4

スライドアップ/ダウンコマンドでIDセレクターの代わりにクラスセレクターを使用しています

$(".hide2").slideDown("fast");

それ以外の

$("#hide2").slideDown("fast");

次のように短縮できます

$(document).ready(function () {

    var map = {
        student : '#hide1',
        faculty : '#hide2',
        alumni : '#hide3',
    }
    $("#role").change(function () {
        var target = $(map[this.value]);
        $('.hide').not(target).stop(true, true).slideUp("fast");
        target.stop(true, true).slideDown("fast");
    });
});

デモ:フィドル

これを見る別の方法は次のとおりです。フィドル

于 2013-10-12T16:29:57.980 に答える