1

ドロップボックスの選択に応じて、特定のフォームを表示しようとしています。これは私がこれまでに持っているものです: HTML:

                <select id='selector'>
                    <option value='option-1' id="opt1">Option 1</option>
                    <option value='option-2' id="opt2">Option 2</option>
                    <option value='option-3' id="opt3">Option 3</option>
                </select>



                <form action="" method="post" id="form1" class="form">
                    <input id="input_1" name="input_1" type="text"/>
                    <input id="input_2" name="input_2" type="text"/>
                    <input id="input_3" name="input_3" type="text"/>
                </form>​

                <form action="" method="post" id="form2" class="form">
                    <input id="input_4" name="input_1" type="text"/>
                    <input id="input_5" name="input_2" type="text"/>
                    <input id="input_6" name="input_3" type="text"/>
                </form>​

                <form action="" method="post" id="form3" class="form">
                    <input id="input_7" name="input_1" type="text"/>
                    <input id="input_8" name="input_2" type="text"/>
                    <input id="input_9" name="input_3" type="text"/>
                </form>​

そしてjquery：

    $select.change(function(){
        if($(this).val() == "opt1"){
            if($('#form1').is(":hidden")){
                $('#form1').show();            
            }        
            $('#form2').hide();
            $('#form3').hide(); 
        }
        if($(this).val() == "opt2"){
            if($('#form2').is(":hidden")){
                $('#form2').show();            
            }
            $('#form1').hide();
            $('#form3').hide(); 
        }
        if($(this).val() == "option3"){
            if($('#form3').is(":hidden")){
                $('#form3').show();            
            }
            $('#form1').hide();
            $('#form2').hide(); 
        }     
    });

さまざまな連絡先タイプに使用したい。「見積もりを依頼する」、「一般的な問い合わせをする」、「フィードバックを投稿する」 - これを実行するより良い考えがない限り. あなたの時間を感謝し、助けてください。

jsfiddle:こちら

ここでの問題は、これが機能しないことです。すべてのフォームを同時に表示し、#selector はそれらの可視性にまったく影響しません。

4

2 に答える 2

3

私はこれがあなたが求めているものだと思います -

$(function() {
    var $select = $("#selector");
    $select.change(function () {
        if ($('#selector option:selected').attr("id") == "opt1") {
            if ($('#form1').is(":hidden")) {
                $('#form1').fadeIn(400);
            }
            $('#form2').hide();
            $('#form3').hide();
        }
        if ($('#selector option:selected').attr("id") == "opt2") {
            if ($('#form2').is(":hidden")) {
                $('#form2').fadeIn(400);
            }
            $('#form1').hide();
            $('#form3').hide();
        }
        if ($('#selector option:selected').attr("id") == "opt3") {
            if ($('#form3').is(":hidden")) {
                $('#form3').fadeIn(400);
            }
            $('#form1').hide();
            $('#form2').hide();
        }
    });
});

jsfiddle - http://jsfiddle.net/RY2vD/

/編集

これが私がこれにアプローチする方法です（ちょっとしたリファクタリング）-

$(function () {
    hideForms();
    $("#form1").show();
    $("#selector").change(function () {
        hideForms();
        if ($('#selector option:selected').attr("id") == "opt1") {
            $('#form1').fadeIn(400);
        } else if ($('#selector option:selected').attr("id") == "opt2") {
            $('#form2').fadeIn(400);
        } else {
            $('#form3').fadeIn(400);
        }
    });
});

function hideForms() {
    $(".form").hide();
    // maybe some other stuff to do here
}

http://jsfiddle.net/xpL49/3/

于 2013-07-04T21:43:46.443 に答える
3

HTML 

<select id='selector' onload="typeres()" onchange="typeres()">
   <option value='option-1' id="opt1">Option 1</option>
   <option value='option-2' id="opt2">Option 2</option>
   <option value='option-3' id="opt3">Option 3</option>
</select>



            <form action="" method="post" id="form1" class="form">
                <input id="input_1" name="input_1" type="text"/>
                <input id="input_2" name="input_2" type="text"/>
                <input id="input_3" name="input_3" type="text"/>
            </form>​

            <form action="" method="post" id="form2" class="form">
                <input id="input_4" name="input_1" type="text"/>
                <input id="input_5" name="input_2" type="text"/>
                <input id="input_6" name="input_3" type="text"/>
            </form>​

            <form action="" method="post" id="form3" class="form">
                <input id="input_7" name="input_1" type="text"/>
                <input id="input_8" name="input_2" type="text"/>
                <input id="input_9" name="input_3" type="text"/>
            </form>

Javascript と jQuery 

function typeres(){
  $('.form').css('visibility','hidden');
  var e=document.getElementById("selector");
  if(e.options[e.selectedIndex].value=="option-1"){
      $('#form1').css('visibility','visible');
  }else if(e.options[e.selectedIndex].value=="option-1"){
      $('#form2').css('visibility','visible');                                             
  }else{
      $('#form3').css('visibility','visible');
  }
}

これが役立つことを願っています..

于 2013-07-04T21:43:56.583 に答える