2013-08-19 170 views
0

我有一個腳本,但我不能讓它工作正常,我想顯示基於選項的輸入,例如如果我選擇「Havale」選項不同的輸入必須顯示,如果我選擇「貝寶」選項不同的輸入。根據選擇選項顯示輸入選項

我的代碼在這裏;

<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> 

and this;

<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> 

謝謝大家!

+0

不能正常工作的意思.. –

+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

+0

貝寶電子郵件地址類是「box2」而不是「box1」。 –

+0

仍然無法正常工作,我無法理解爲什麼。 – birlikbilisim

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

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/