当我们点击显示的子类别时，我想显示受尊重的数据 [英] I want to display the respected data when we click on the displayed sub categories
本文介绍了当我们点击显示的子类别时，我想显示受尊重的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我们点击显示子类别时，我想显示数据库中的相关数据。相关数据应显示在我在代码内容中提到的另一个div中。这是我在数据库中的数据[{id：1，CategoryName：maths，SubCategoryName：algebra，Title：maths，Description：tis is good，ThumbnailUrl：www .studies.com 视频ID： 研究}，{ ID： 2， 类别名称： 体育， SubCategoryName： 蟋蟀， 标题： 游戏， 说明： 玩 ThumbnailUrl： www.youtube.com， 视频ID： 体育}，{ ID： 3， 类别名称： 科学， SubCategoryName： 物理学，标题：物理，描述：它是好的子，ThumbnailUrl：www.physics.com，VideoId：研究}，{id：4 ，CategoryName：社交，SubCategoryName：历史，标题：历史，描述：这是好的子，ThumbnailUrl：www.history.com，VideoId ：学习}]。
这是我试过的代码
I want to display the related data from database when we click on the display sub categories.That related data should display in the another div as i mentioned in the code "content".This is the data i have in the data base [{"id":"1","CategoryName":"maths","SubCategoryName":"algebra","Title":"maths","Description":"tis is good","ThumbnailUrl":"www.studies.com","VideoId":"studies"},{"id":"2","CategoryName":"sports","SubCategoryName":"cricket","Title":"Games","Description":"playing","ThumbnailUrl":"www.youtube.com","VideoId":"sports"},{"id":"3","CategoryName":"science","SubCategoryName":"physics","Title":"physics","Description":"It is good sub","ThumbnailUrl":"www.physics.com","VideoId":"studies"},{"id":"4","CategoryName":"social","SubCategoryName":"history","Title":"history","Description":"It is good sub","ThumbnailUrl":"www.history.com","VideoId":"studies"}].
This is the code i tried
<html>
<head>
<title>example</title>
<style>
#header{
background-color:#c3dfef;
}
#footer
{
background-color:#ccecd8;
margin:5px;
display: block;
clear: both;
}
#sidebar-left
{
background-color:#D0D0D0 ;
float: left;
width:250px;
height:530px;
}
#content
{
background-color:#ccdff0;
height:530px;
}
div{
padding:10px;
border:solid 1px black;
}
.button2:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
</style>
<body>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function()
{
jQuery.ajax(
{
type: 'GET',
url: 'Youtube_category.php',
dataType: 'JSON',
success:function(data)
{
for(i=0;i<jQuery(data).length;i++)
{
$('#parentCategory').append('<option value = '+ data[i].categoryName+'>' + data[i].categoryName + '</option>');
}
}
});
});
</script>
<script>
jQuery(document).ready(function()
{
jQuery('#parentCategory').change(function()
{
jQuery("#subCategory").load("subCategory.php?choice="+jQuery("#parentCategory").val());
});
});
</script>
<script>
function showDiv() {
var SubCategory = document.getElementById('subCategory');
for (i = 0; i < SubCategory.options.length; i++) {
document.getElementById('sidebar-left').innerHTML += SubCategory.options[i].value + "<br/>";
}
var subCategorySelectedText = document.getElementById('subCategory').options[subCategory];
var subCategoryId = document.getElementById('subCategory').options[subCategory].id
document.getElementById('id').value = subCategoryId;
document.getElementById('ParentCategoryText').value = parentCategorySelectedText;
document.getElementById('SubCategoryText').value = subCategorySelectedText;
document.getElementById('sidebar-left').innerHTML = subCategorySelectedText;
}
function getValues(){
var id = document.getElementById('id').value;
var parentCategoryText = document.getElementById('ParentCategoryText').value;
var subCategoryText = document.getElementById('SubCategoryText').value;
}
</script>
<script>
$(document).ready(function() {
$('body').on('click', '#sidebarleft', function() {
$("#display").load("vedio_details.php?id=1");
});
});
</script>
<form id="form1">
<div id="header" >
<select id="parentCategory" value="parentCategory" class="button2" name="category">
<option selected="selected" name="category" value="selected">--Select category--</option>
</select>
<select id="subCategory" class="button2" name="subCategory">
<option selected="selected" name="subCategory" id="0" value="selected">--Select subCategory--</option>
</select>
<input type="button" name="answer" value="Go" class="button2" onclick="showDiv()" />
</div>
<input type="hidden" id="id">
<input type="hidden" id="ParentCategoryText">
<input type="hidden" id="SubCategoryText">
<div id="sidebar-left" >
<span><a id="sidebarleft" href="#" onclick="getValues()">
</span>
</div>
</a>
<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>
推荐答案
（'＃parentCategory'）。append（'< option value =' + data [i] .categoryName +' < span class =code-keyword>> '+ data [i] .categoryName +'< / option > '）;
}
}
}）;
}）;
< / script >
< script >
jQuery（document）.ready（function（）
{
jQuery（'＃parentCategory'）。change（function（）
{
jQuery（＃subCategory）。load（subCategory.php？choice =+ jQuery（＃parentCategory）。val（））;
}）;
}）;
< / script >
< script >
function showDiv（）{
var SubCategory = document.getElementById（'subCategory'）;
for（i = 0; i < SubCategory.options.length; i ++） {
document.getElementById（'sidebar-left'）。innerHTML + = SubCategory.options [i] .value + < br / > ;
}
var subCategorySelectedText = document.getElementById（'subCategory'）。options [subCategory];
var subCategoryId = document.getElementById（'subCategory'）。options [subCategory] .id
document.getElementById（'id'）。value = subCategoryId;
document.getElementById（'ParentCategoryText'）。value = parentCategorySelectedText;
document.getElementById（'SubCategoryText'）。value = subCategorySelectedText;
document.getElementById（'sidebar-left'）。innerHTML = subCategorySelectedText;
}
函数getValues（）{
var id = document.getElementById（'id'）。value;
var parentCategoryText = document.getElementById（'ParentCategoryText'）。value;
var subCategoryText = document.getElementById（'SubCategoryText'）。value;
}
< / script >
< script >
('#parentCategory').append('<option value = '+ data[i].categoryName+'>' + data[i].categoryName + '</option>'); } } }); }); </script> <script> jQuery(document).ready(function() { jQuery('#parentCategory').change(function() { jQuery("#subCategory").load("subCategory.php?choice="+jQuery("#parentCategory").val()); }); }); </script> <script> function showDiv() { var SubCategory = document.getElementById('subCategory'); for (i = 0; i < SubCategory.options.length; i++) { document.getElementById('sidebar-left').innerHTML += SubCategory.options[i].value + "<br/>"; } var subCategorySelectedText = document.getElementById('subCategory').options[subCategory]; var subCategoryId = document.getElementById('subCategory').options[subCategory].id document.getElementById('id').value = subCategoryId; document.getElementById('ParentCategoryText').value = parentCategorySelectedText; document.getElementById('SubCategoryText').value = subCategorySelectedText; document.getElementById('sidebar-left').innerHTML = subCategorySelectedText; } function getValues(){ var id = document.getElementById('id').value; var parentCategoryText = document.getElementById('ParentCategoryText').value; var subCategoryText = document.getElementById('SubCategoryText').value; } </script> <script>
（document）.ready（function（）{
(document).ready(function() {
（'body'）。on（'click '，'＃sidebarleft'，function（）{
('body').on('click', '#sidebarleft', function() {
这篇关于当我们点击显示的子类别时，我想显示受尊重的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
