Показать ввод на основе опции выбора

Question

У меня есть сценарий, но я не мог заставить его работать правильно, я хочу показать входы на основе параметров, например, если я выберу вариант «Хавале», разные входы должны отображаться, если я выберу Опция «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> 

Спасибо всем!

Answer 1

Вы должны зарегистрировать обработчик для 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

Answer 2

Попробуйте

$(".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

Answer 3

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/