在jquery中动态生成组合框

时间:2012-12-21 11:40:55

标签: php javascript jquery json

我想要做的是:如果用户在数据库中只有一个信用卡号,那么在我成功完成的页面上显示文本字段但如果用户的多个信用卡号已存储在我的数据库中,那么我不想显示我想要的文本字段将所有信用卡号码显示在组合框中。

以下是我得到的ajax回复:

{
    "fname": "abc",
    "lname": "xyz",
    "creditCardInfo": [
        {
            "creditCardNumber": "378282246310005",
            "creditCardType": "AX",
            "securityCode": "1234",
            "expirationDate": "2020-02-01"
        },
        {
            "creditCardNumber": "6011000990139424",
            "creditCardType": "DS",
            "securityCode": "321",
            "expirationDate": "2030-12-01"
        }
    ],
    "creditCardNumber": "6011000990139424",
    "creditCardType": "DS",
    "creditCardCVC": "321",
    "creditCardExpirationMonth": "12",
    "creditCardExpirationYear": "2030"
}

(注:以上回复包含所有测试信用卡号和cvc代码)

我尝试使用jquery each循环,但能够做到。

以下是我的代码:

$.ajax({
type: "POST",
 url: "<?php echo $_SERVER['HOST']; ?>"+action,
 dataType: 'json',
 data: formdata,
 success: function(data)
{
var userinfo = eval(data);
alert(userinfo);
if(userinfo['msg'] == 'fail'){
$(".usrmsg").show();
$(".validate").hide();
}
else{

if(!$("#fname1").val()) $("#fname1").val(userinfo['fname']);
if(!$("#lname1").val()) $("#lname1").val(userinfo['lname']);
if(!$("#billingCity").val()) $("#billingCity").val(userinfo['billingCity']);

if(userinfo['creditCardInfo']){
$('#creditCardComboBox').show();
$('#creditCardTextField').show();

// $(userinfo['creditCardInfo']).each(function(index) {
// alert(index + ': ' + $(this).text());
// $("#creditCardNumber option[value="+index['creditCardNumber']+"]").attr("selected", "selected");                                
// });                                

$("#creditCardType option[value="+userinfo['creditCardInfo']['creditCardType']+"]").attr("selected", "selected");
$("#creditCardExpirationMonth option[value="+userinfo['creditCardInfo']['creditCardExpirationMonth']+"]").attr("selected", "selected");
$("#creditCardExpirationYear option[value="+userinfo['creditCardInfo']['creditCardExpirationYear']+"]").attr("selected", "selected");
}

if(!$("#billingFirstName").val()) $("#billingFirstName").val(userinfo['fname']);
if(!$("#billingLastName").val()) $("#billingLastName").val(userinfo['lname']);
if(!$("#creditCardCVC").val()) $("#creditCardCVC").val(userinfo['creditCardCVC']);
}
}
});

需要帮助。

提前致谢。

1 个答案:

答案 0 :(得分:1)

猜猜这将是你的代码。使用jquery hide / show / use .innerHtml标签来显示你的内容。

$.ajax({
  type: "POST",
  url: "<?php echo $_SERVER['HOST']; ?>"+action,
  dataType: 'json',
  data: formdata,
  success: function(data)
  {
  //Check the length of the json array
   var creditcardinfo = data.creditCardInfo

   do
   {
      if(creditcardinfo.length==1){
        $('#creditCardTextField').show();
        $('#creditCardComboBox').hide();
        //Set value of creditcardText
        $('#creditCardTextField').val(creditcardinfo[i].creditCardNumber);

      }else if(creditcardinfo.length>1){
        $('#creditCardComboBox').show();
        $('#creditCardTextField').hide();
        //ASSUMING YOU Are using <select> tag
        var newOption = $('<option>');
         newOption.attr('value',creditcardinfo[i].creditCardNumber).text(creditcardinfo[i].creditCardNumber);
        $('#creditCardComboBox').append(newOption);
      }
   }while (i<creditcardinfo.length);

  }
 });