jquery 显示对应选择的多个选项的 JSON 数据

Question

我正在开发一个通过 AJAX 请求 fares.json 并使用实时数据填充选择选项的小部件。最终用户在使用小部件控件时应该能够看到票价总更新。

JSON 数据：

{
"info": {
    "anytime": "Valid anytime",
    "weekday": "Valid Monday through Friday, 4:00 a.m. - 7:00 p.m. On trains arriving or departing 30th Street Station, Suburban and Jefferson Station",
    "evening_weekend": "Valid weekdays after 7:00 p.m.; all day Saturday, Sunday and major holidays. On trains arriving or departing 30th Street Station, Suburban and Jefferson Station",
    "advance_purchase": "Tickets available for purchase at all SEPTA offices.",
    "onboard_purchase": "Tickets available for purchase from a train conductor aboard SEPTA regional rail trains."
},
"zones": [{
    "name": "CCP/Zone 1",
    "zone": 1,
    "fares": [{
        "type": "weekday",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 4.75
    }, {
        "type": "weekday",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 6.00
    }, {
        "type": "evening_weekend",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 3.75
    }, {
        "type": "evening_weekend",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 5.00
    }, {
        "type": "anytime",
        "purchase": "advance_purchase",
        "trips": 10,
        "price": 38.00
    }]
}, {
    "name": "Zone 2",
    "zone": 2,
    "fares": [{
        "type": "weekday",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 4.75
    }, {
        "type": "weekday",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 6.00
    }, {
        "type": "evening_weekend",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 3.75
    }, {
        "type": "evening_weekend",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 5.00
    }, {
        "type": "anytime",
        "purchase": "advance_purchase",
        "trips": 10,
        "price": 45.00
    }]
}, {
    "name": "Zone 3",
    "zone": 3,
    "fares": [{
        "type": "weekday",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 5.75
    }, {
        "type": "weekday",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 7.00
    }, {
        "type": "evening_weekend",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 5.00
    }, {
        "type": "evening_weekend",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 7.00
    }, {
        "type": "anytime",
        "purchase": "advance_purchase",
        "trips": 10,
        "price": 54.50
    }]
}, {
    "name": "Zone 4",
    "zone": 4,
    "fares": [{
        "type": "weekday",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 6.50
    }, {
        "type": "weekday",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 8.00
    }, {
        "type": "evening_weekend",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 5.00
    }, {
        "type": "evening_weekend",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 7.00
    }, {
        "type": "anytime",
        "purchase": "advance_purchase",
        "trips": 10,
        "price": 62.50
    }]
}, {
    "name": "NJ",
    "zone": 5,
    "fares": [{
        "type": "weekday",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 9.00
    }, {
        "type": "weekday",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 10.00
    }, {
        "type": "evening_weekend",
        "purchase": "advance_purchase",
        "trips": 1,
        "price": 9.00
    }, {
        "type": "evening_weekend",
        "purchase": "onboard_purchase",
        "trips": 1,
        "price": 10.00
    }, {
        "type": "anytime",
        "purchase": "advance_purchase",
        "trips": 10,
        "price": 80.00
    }]
}]}

我的 HTML 对每个应该填充数据的地方都有 id。

HTML：

<select id="zone"></select><select id="time"></select>
<form id="radio" class="widget-container--radio">
    <input type="radio" name="purchase" value="advance_purchase"> Station Kiosk<br>
    <input type="radio" name="purchase" value="onboard_purchase"> Onboard<br>
</form>
<form><input type="number" name="firstname" class="widget-container--quantity"><br></form>
<div id="fare-total" class="widget-container--fare"></div>

我写了一点 jQuery 来获取 JSON 数据和输出选项。所需的影响是选择选项（名称，类型，购买和跳闸）票价总量的票价将在＃票价中显示。我如何做到这一点？

jquery：

var $zone = $('#zone');
var $time = $('#time');
var $radio = $('#radio');
var $fareTotal = $('#fare-total');
$.getJSON('fares.json', function(data) {
  $zone.html('');
  $time.html('');
  $radio.html('');
  $fareTotal.html('');
  for (i = 0; i < data['zones'].length; i++) {
    $zone.append('<option class="' + data['zones'][i]['name'] + '">' + data['zones'][i]['name'] + '</option>');
    $time.append('<option>' + data['zones'][i]['fares'][i]['type'] + '</option>');
    $fareTotal.append('<h2 class="">$' + data['zones'][i]['fares'][i]['price'] + '</h2>');
  }
});

Answer 1

如果票价数据是静态的，我建议按照@Barmar 的建议将其移动到本地源或全局变量。

如果票价变化很大，那么 AJAX 是更好的选择。以下是一些建议。

工作示例：https://jsfiddle.net/Twisty/vsjn63vy/

建议的 JavaScript

$(function() {
  var $zone = $('#zone');
  var $time = $('#time');
  var $radio = $('#radio');
  var $fareTotal = $('#fare-total');
  $.getJSON('fares.json', function(data) {
      $zone.html('');
      $time.html('');
      $radio.html('');
      $fareTotal.html('');
      $.each(data.zones, function(i, zone) {
        $zone.append($("<option>", {
          class: zone.name
        }).html(zone.name));
        $time.append($("<option>").html(zone.fares[i].type));
        $fareTotal.append($("<h2>").html(zone.fares[i].price));
      });
    }
  });
});

Answer 2

当您加载 JSON 时，您应该只填写区域菜单，因为时间选项取决于您选择的区域。

单选按钮选项不是来自 JSON，因此您不应该清除该 DIV，只需取消选中按钮，以便用户必须再次选择它们。

用户选择一个区域后，您就可以填写时间菜单。一旦他们选择了时间和其中一个单选按钮，您就可以显示费用。

var $zone = $('#zone');
var $time = $('#time');
var $radio = $('#radio').find(":radio");
var $fareTotal = $('#fare-total');
var fare_data = null;
$.getJSON('fares.json', function(data) {
  fare_data = data;
  $zone.html('<option value="">Select a zone</option>');
  $time.html('<option value="">Zone must be selected first</option>');
  $radio.prop('checked', false); // uncheck all the boxes
  $fareTotal.html('');
  $.each(data.zones, function() {
    $zone.append($('<option>', {
      value: this.zone,
      text: this.name
    }));
  });
});

$zone.change(function() {
  var zone = this.value;
  $fareTotal.empty();
  $radio.prop('checked', false); // uncheck all the boxes
  if (zone == '') {
    $time.html('<option value="">Zone must be selected first</option>');
    return;
  }
  $time.html('<option value="">Select a time</option>');
  $.each(fare_data.zones, function() {
    if (this.zone == zone) {
      var fares_appended = {};
      $.each(this.fares, function() {
        if (!fares_appended[this.type]) {
          $time.append($('<option>', {
            value: this.type,
            text: fare_data.info[this.type]
          }));
          fares_appended[this.type] = true;
        }
        return false; // break the $.each loop
      });
    }
  });
});

function calc_price() {
  var zone = $zone.val();
  var type = $time.val();
  var purchase = $radio.find(":radio:checked").val();
  $fareTotal.empty();
  if (zone && time && purchase) {
    $.each(fare_data.zones, function() {
      if (this.zone == zone) {
        $.each(this.fares, function() {
          if (this.type == type && this.purchase = purchase) {
            $fareTotal.append($('<h2>', {
              text: '$' + this.price
            }));
            return false;
          }
        });
        return false;
      }
    });
  }
}

$time.change(calc_price);
$radio.change(calc_price);