Question

我正在建立一个电子商务网站，我写的付款方式

<select name="pay_method">
  <option value="0" selected="selected">Select a Payment Method</option>
  <option value="1">Cash on Delivery</option>
  <option value="2">Credit Card</option>
  <option value="3">Debit Card</option>
  <option value="4">Netbanking</option>
</select>

现在，当某人选择信用卡时，会显示有关信用卡的div以进行付款。

Answer 1

简单

关于选择框的更改事件

$("#pay_method").change(function(){
  //Hide alldivshere
  $("#div").css("display","none")
 .
 .
  if($(this).val()=="1")
   $("#div").css("display","block")
  else if($(this).val()=="2")
   $("#div").css("display","block")
  .
  .     
});

Answer 2

在其他任何事情之前：考虑使用 jQueryUI Accordion - 它实际上做了你想要的，并且需要更少的努力。

如果您想手动执行此操作，请跟踪jQuery事件change()并使用方法val()获取所选值 - 正如其他答案中已建议的那样。

见this fiddle。

<强> HTML ：

<select id="pay_method" name="pay_method">
  <option value="0" selected="selected">Select a Payment Method</option>
  <option value="1">Cash on Delivery</option>
  <option value="2">Credit Card</option>
  <option value="3">Debit Card</option>
  <option value="4">Netbanking</option>
</select>

<div id="cash_payment" class="payment_method">
  You selected <strong>cash</strong> payment method. 
</div>
<div id="credit_card_payment" class="payment_method">
  You selected <strong>credit card</strong> payment method. 
</div>
<div id="debit_card_payment" class="payment_method">
  You selected <strong>debit card</strong> payment method. 
</div>
<div id="netbanking_payment" class="payment_method">
  You selected <strong>netbanking</strong> payment method. 
</div>

JS ：

$("#pay_method").change(function()
{
  $('.payment_method').slideUp();
  switch($('#pay_method :selected').val())
  {
    case '1': $('#cash_payment').slideDown(); break;
    case '2': $('#credit_card_payment').slideDown(); break;
    case '3': $('#debit_card_payment').slideDown(); break;
    case '4': $('#netbanking_payment').slideDown(); break;
  }
});

Answer 3

https://stackoverflow.com/questions/how-to-ask
http://api.jquery.com/

的 LIVE DEMO

CSS：

.hide{ display:none; }

jQuery的：

$(function(){ // DOM ready $('[name=pay_method]').change(function(){ $('.hide').hide() $('[data-panel='+ this.value +']').show(); }); });

HTML：

<select name="pay_method"> <option value="0" selected="selected">Select a Payment Method</option> <option value="1">Cash on Delivery</option> <option value="2">Credit Card</option> <option value="3">Debit Card</option> <option value="4">Netbanking</option> </select> <div class="hide" data-panel="1">Cash on Delivery</div> <div class="hide" data-panel="2">Credit Card</div> <div class="hide" data-panel="3">Debit Card</div> <div class="hide" data-panel="4">Netbanking</div>

Answer 4

    var a =    $("#pay_method :selected").val();
     switch (a){
       case 1:
           HideAll()
           $("#div1").show();

       case 2:
           HideAll()
           $("#div2").show();
       case 3:
             HideAll()
           $("#div3").show();    
       case 4:
           HideAll()
           $("#div4").show();

             }

function HideAll(){

                   $("#div1").hide();

                 //hide other three divs also


                 }

Answer 5

$(document).ready(function () {
    $('#ddlPayment').change(function () {

       if($("#ddlPayment option:selected").val()==2)
             $('#creditcard').show();

      });
});

JS Fiddle

<select name="pay_method" id="ddlPayment">
    <option value="0" selected="selected">Select a Payment Method</option>
    <option value="1">Cash on Delivery</option>
    <option value="2">Credit Card</option>
    <option value="3">Debit Card</option>
    <option value="4">Netbanking</option>
</select>
<div id="creditcard" style="display:none;">
    credit card details 
    <input type="text" />
</div>

Answer 6

试试这个

<select id="pay_method">
  <option value="0" selected="selected">Select a Payment Method</option>
  <option value="1">Cash on Delivery</option>
  <option value="2">Credit Card</option>
  <option value="3">Debit Card</option>
  <option value="4">Netbanking</option>
</select>
<div id="1" class="Payment">Cash on Delivery Details</div>
<div id="2" class="Payment">Credit Card Details</div>
<div id="3" class="Payment">Debit Card Details</div>
<div id="4" class="Payment">Netbanking Details</div>

<script type="text/javascript">
 $(function() {
        $('#pay_method').change(function(){
            $('.Payment').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>

根据<select>标签</select> </div>中的值显示特定的<div>

6 个答案: