根据选择选项显示输入

时间:2013-08-19 07:05:39

标签: javascript jquery

我有一个脚本,但我无法使其正常工作,我想根据选项显示输入,例如,如果我选择“Havale”选项,必须显示不同的输入,如果我选择“Paypal”选项不同的输入

我的代码在这里;

<script type="text/javascript">
$(document).ready(function(){

$("input[name$='group_name']").click(function(){

var option_value = $(this).val();

if(option_value=='paypal') {
$(".box1").css("display","block");
 $(".box2").css("display","none");

}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");

}


 });

 $(".box1").show();
 $(".box2").hide();


});
</script>

和这个;

<select name="payment_method" class="select2" onchange="this.form.submit();" style="width: 160px;">
                <option value="">-- Ödeme şekli seçin --</option>
                <option value="paypal">Paypal</option>
                <option value="havale">Havale / EFT</option>

            </select>

和这个;

    <div class="withdraw-center">          
    <div class="form-input-title box1">Banka Hesap Adı Soyadı</div>
    <div class="form-input-area-bg3 box1">
      <input type="text" id="payment_name" class="input3" name="payment_name" value="<?php echo $row['payment_name']; ?>" size="37" />
    </div>
    <div class="form-input-title">Banka Adı</div>
    <div class="form-input-area-bg3">
      <input type="text" id="payment_bank" class="input3" name="payment_bank" value="<?php echo $row['payment_bank']; ?>" size="37" />
    </div>
    <div class="form-input-title">IBAN</div>
    <div class="form-input-area-bg3">
      <input type="text" id="iban" class="input3" name="iban" value="<?php echo $row['iban']; ?>" size="37" maxlength="26" />
    </div>
    <div class="form-input-title">T.C. Kimlik No</div>
    <div class="form-input-area-bg3">
      <input type="text" id="tckn" class="input3" name="tckn" value="<?php echo $row['tckn']; ?>" size="37" maxlength="11" />
    </div>


        <div class="form-input-title box2">PayPal E-mail Adresi</div>
    <div class="form-input-area-bg3 box2">
      <input type="text" id="paypal_email" class="input3" name="paypal_email" value="<?php echo $row['paypal_email']; ?>" size="37" />
    </div>
    </div>

谢谢大家!

3 个答案:

答案 0 :(得分:2)

您需要将处理程序注册到payment_method元素更改事件

$(document).ready(function(){

    $("select[name='payment_method']").change(function(){

        var option_value = $(this).val();

        if(option_value=='paypal') {
            $(".box1").css("display","block");
            $(".box2").css("display","none");

        }
        else if(option_value=='havale') {
            $(".box2").css("display","block");
            $(".box1").css("display","none");

        }


    });
    $(".box1").show();
    $(".box2").hide();
});

演示:Fiddle

答案 1 :(得分:0)

试试这个

$(".box1").hide();
$(".box2").hide();
$("select[name='payment_method']").change(function(){
        var option_value = $(this).val();
        if(option_value=='paypal') {
            $(".box2").show();
            $(".box1").hide();
        }
        else if(option_value=='havale') {
            $(".box1").show();
            $(".box2").hide();
        } else {
            $(".box1").hide();
            $(".box2").hide();
        }
    });

FIDDLE

答案 2 :(得分:0)

You need to use the change event on the select box of the payment type.
Try this:

    $(document).ready(function(){


      $(".box1").hide();
     $(".box2").hide();
        $(".withdraw-center").hide();

    $(".select2").change(function(){

    var option_value = $(this).val();

    if(option_value=='paypal') {
        $(".withdraw-center").show();
    $(".box1").css("display","block");
     $(".box2").css("display","none");

    }
    else if(option_value=='havale') {
        $(".withdraw-center").show();
    $(".box2").css("display","block");
    $(".box1").css("display","none");

    }else{
    $(".withdraw-center").hide();
    }


     });

Here is the fiddle:http://jsfiddle.net/ULUFe/1/