我想在单击受尊重的子类别时显示相关数据 [英] i want to display the related data on clicking the respected subcategory
本文介绍了我想在单击受尊重的子类别时显示相关数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Actually i have the two divs on left side div i will dispaly the subcategories.Then if we click on the any of the subcategory it should display the related data in right side div without page refreshing.
Now actually what i want is how to make the that subcategories is in href and on clicking that we want to take the data from database to display.please help me
this is my code
<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/>";
}
}
</script>
<!-- <script>
function showDiv() {
document.getElementById('sidebar-left').style.display = "block";
var index = document.getElementById('subCategory').selectedIndex;
var selectedText = document.getElementById('subCategory').options[index].innerHTML;
document.getElementById('sidebar-left').innerHTML = selectedText;
}
</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" value="selected">--Select subCategory--</option>
</select>
<input type="button" name="answer" value="Go" class="button2" onclick="showDiv()" />
</div>
<a id="sidebarleft" href="vedio_details.php" class="sidebr">
<div id="sidebar-left" ></div>
</a>
<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>
推荐答案
（'＃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 / > ;
}
}
< / script >
<！ - < span class =code-comment>< script>
函数showDiv（）{
document.getElementById（'sidebar-left'）。style.display =block;
var index = document.getElementById（'subCategory'）。selectedIndex;
var selectedText = document.getElementById（'subCategory'）。options [index] .innerHTML;
document.getElementById（'sidebar-left'）。innerHTML = selectedText;
}
< / 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/>"; } } </script> <!-- <script> function showDiv() { document.getElementById('sidebar-left').style.display = "block"; var index = document.getElementById('subCategory').selectedIndex; var selectedText = document.getElementById('subCategory').options[index].innerHTML; document.getElementById('sidebar-left').innerHTML = selectedText; } </script> --> <script>
（document）.ready（function（ ）{
(document).ready(function() {
（'body'）。on（'click'，'＃sidebarleft'，function（）{
('body').on('click', '#sidebarleft', function() {
这篇关于我想在单击受尊重的子类别时显示相关数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
