在下拉列表中显示与选项对应的数组中的数据

Question

我正在尝试显示数组中的数据。我从这个数组中获取了国家，但我需要在从下拉选项中选择后显示数据。

我需要将“making_calls”值放入 .price-call p 中，将“sending_texts”放入 .price-text p 中。

这是代码

        array =[
          {
            "name": "Afghanistan",
            "dial_code": "+93",
            "code": "AF",
            "making_calls": "€0.30",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        },
        {
            "name": "Albania",
            "dial_code": "+355",
            "code": "AL",
            "making_calls": "€0.6",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        },
        {
            "name": "Algeria",
            "dial_code": "+213",
            "code": "DZ",
            "making_calls": "€1.20",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        }
        ];
        
        $.each(array, function (i, p) {
          $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' +  '(' + p.dial_code+  ')'  ));
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
   <option selected disabled>Country</option>
</select>

<div class="calls">
  <p>Making Calls</p>
  <p class="price-call">0.30$</p>
</div>
<div class="texts">
  <p>Sending Texts</p>
  <p class="price-text">0.15$</p>
</div>

Answer 1

使用 if 下拉列表中的条件更改并比较您的国家/地区代码并找到所需的结果。

array = [{
    "name": "Afghanistan",
    "dial_code": "+93",
    "code": "AF",
    "making_calls": "€0.30",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  },
  {
    "name": "Albania",
    "dial_code": "+355",
    "code": "AL",
    "making_calls": "€0.6",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  },
  {
    "name": "Algeria",
    "dial_code": "+213",
    "code": "DZ",
    "making_calls": "€1.20",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  }
];

$.each(array, function(i, p) {
  $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' + '(' + p.dial_code + ')'));
});

$('#selectCountry').on('change', function() {
  var country = $(this).val();
  $.each(array, function(i, p) {
    if (p.code == country) {
      $('.price-call').html(p.making_calls);
      $('.price-text').html(p.sending_texts);
        return false; // break if match
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
  <option selected disabled>Country</option>
</select>

<div class="calls">
  <p>Making Calls</p>
  <p class="price-call">0.30$</p>
</div>
<div class="texts">
  <p>Sending Texts</p>
  <p class="price-text">0.15$</p>
</div>

Answer 2

您可以使用change，这样您就可以获得选择值，然后您可以使用$.each 来检查具有if 条件的数组中的数据，然后将making_calls 和sending_texts 附加到它们的元素。

var countries =[
      {
        "name": "Afghanistan",
        "dial_code": "+93",
        "code": "AF",
        "making_calls": "€0.30",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    },
    {
        "name": "Albania",
        "dial_code": "+355",
        "code": "AL",
        "making_calls": "€0.6",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    },
    {
        "name": "Algeria",
        "dial_code": "+213",
        "code": "DZ",
        "making_calls": "€1.20",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    }
];
        
$.each(countries, function (i, p) {
    $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' +  '(' + p.dial_code+  ')'  ));
});

$('#selectCountry').on('change',function(){
    var country = $(this).val();
    $.each(countries, function (key, val) {
        if( val.code == country ){
            $('.price-call').html(val.making_calls);
            $('.price-text').html(val.sending_texts);
            return false; // break loop if conditions match
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
    <option selected disabled>Country</option>
</select>

<div class="country-info">
    <div class="calls">
        <p>Making Calls</p>
        <p class="price-call">0.30$</p>
    </div>
    <div class="texts">
        <p>Sending Texts</p>
        <p class="price-text">0.15$</p>
    </div>
</div>