[英]jQuery - Get selected value from json object
What I am trying to do is that when an option is selected (for example #4) I get the date from the json object so it would render out: "Monday 26th December". 我想做的是,当选择一个选项(例如#4)时,我从json对象获取日期,因此它将显示为:“ 12月26日,星期一”。 I'm struggling to display this - does anyone know how I could do this please?
我正在努力展示这个-有人知道我该怎么做吗?
https://jsfiddle.net/9L53epre/3/ 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>
The value in data-delivery-date
attribute is a string - use JSON.parse()
to convert it into an object - see demo below: 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>
Your data is a string. 您的数据是一个字符串。 You need to convert is to a JSON object first then use dot or array notation to access the members.
您首先需要将转换为JSON对象,然后使用点或数组表示法访问成员。
$(function() {
$('select').change(function() {
var val = $(this).val();
console.log(val);
});
var data = JSON.parse($('#delivery-date').data('delivery-date'));
console.log(data['7']);
// console.log(data.item[val]);
});
I've updated your fiddle so that it parses your json string and then uses the dataObj[4] to to show the date. 我已经更新了您的小提琴,以便它解析您的json字符串,然后使用dataObj [4]显示日期。
var dataObj = jQuery.parseJSON(data);
https://jsfiddle.net/9L53epre/4/ https://jsfiddle.net/9L53epre/4/
Use JSON.parse
to parse the json string and then you can loop over the object with a for
. 使用
JSON.parse
解析json字符串,然后可以使用for
遍历对象。 Try this: 尝试这个:
$(function() { var data = $('#delivery-date').data('delivery-date'); data = JSON.parse(data); $('select').on('change', function() { var val = $(this).val(); var data_length = Object.keys(data).length; for (var k = 1; k < data_length; k++) { if (val == k) { $('#output').html(data[k]); } } }); });
<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> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> </select> <p id='output'> </p>
Also, if you want to append the values from JSON into the select dinamically, and filter the empty values, you can do it like this: 另外,如果您想将JSON中的值附加到选择语句中,并过滤空值,则可以这样做:
$(function() { var data = $('#delivery-date').data('delivery-date'); data = JSON.parse(data); var data_length = Object.keys(data).length; for (var i = 1; i < data_length; i++) { if (data[i] != '') { $('select').append("<option value=" + i + ">option " + i + "</option>"); } } $('select').on('change', function() { var val = $(this).val(); for (var k in data) { if (val == k) { $('#output').html(data[k]); } } }); });
<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='default' selected disabled>Select value</option> </select> <p id='output'> </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.