我需要使用jquery从文本框中附加用户输入文本。如果用户在“操作”文本框中键入内容,然后从日期文本框中选择日期,则必须在午餐和下午12点之后添加值。以下是示例链接:http://trialwebs.byethost8.com/。 Wake和Lunch的值出现在JSON文件中。这是json代码:
{
"action": [
{"name":"WakeUp","date":"8:00am"},
{"name":"Lunch","date":"12:00pm"}
]}
我使用了以下代码(JS& HTML):
$.getJSON("jsondata.json", function(data) {
$.each(data.action, function(index, elem) {
//Append option to name
$("#name").append($("<li />", {
text: elem.name
}));
//Append age
$("#date").append($("<li />", {
text: elem.date
}));
});
});
&#13;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="script/myscript.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
$(function() {
$("#datepicker").datepicker();
});
</script>
<style>
#name{
display:inline-block;
}
#date{
display:inline-block;
}
li{
list-style:none;
}
</style>
</head>
<body>
Action:<input type="text" name="firstname">
Date:<input type="text" id="datepicker">
<button id="btn2">Append list items</button>
<br>
<ol id="name">
</ol>
<ol id="date">
</ol>
</body>
</html>
&#13;