jQuery - 从json对象中获取选定的值

Question

我想要做的是,当选择一个选项时(例如#4),我从json对象获取日期,以便它呈现出:"12月26日星期一".我很难展示这个 - 有谁知道我怎么能这样做呢？

https://jsfiddle.net/9L53epre/3/

$(function() {
  $('select').change(function() {
    var val = $(this).val();
    console.log(val);
  });

  var data = $('#delivery-date').data('delivery-date');

  console.log(data);
  // console.log(data.item[val]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>

<select>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 4</option>
  <option value="4">option 4</option>
</select>

Answer 1

data-delivery-date属性中的值是一个字符串 - 用于JSON.parse()将其转换为对象 - 请参阅下面的演示:

$(function() {
  var data = JSON.parse($('#delivery-date').data('delivery-date'));
  $('select').change(function() {
    var val = $(this).val();
    console.log(data[val]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>

<select>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
</select>