i want to display the all values in the drop down box in the div

Question

0.00/5 (No votes)

See more:

Actually i have two drop down boxes when i am selecting the category value in the first drop down box automatically/Dynamically the sub-category values had displayed in the second drop down box.Now i want to display the all sub-category values in the second drop down box in the div..so please help any one..

XML

<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

<script>
jQuery(document).ready(function()
{
    jQuery('#parentCategory').change(function()
        {
        jQuery("#subCategory").load("subCategory.php?choice="+jQuery("#parentCategory").val());
    });
});
</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>

<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"  önclick="showDiv()" />

 </div>



<div id="sidebar-left" ></div>

<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>

this is the code i had done..iam geeting only the selected valu in the div but i want all values in the dropdown

Posted 15-Feb-14 22:19pm

Narendra Naidu89

Updated 17-Feb-14 2:12am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 16-Feb-14 5:19am

Not clear. You are already populating the second dropdown.

Narendra Naidu89 17-Feb-14 5:37am

i have already the second dropdown..now i want to display that values in the second dropdown into the div

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 17-Feb-14 5:57am

So, what is the issue. What have you tried?

Narendra Naidu89 17-Feb-14 6:28am

<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() {

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>

<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" önclick="showDiv()" />

</div>

<div id="sidebar-left" ></div>

<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>
this is the code i had done..iam geeting only the selected valu in the div but i want all values in the dropdown

EZW 18-Feb-14 3:26am

I think he wants to populate the DIV based on what is selected from the second dropdown.

Narendra Naidu89 18-Feb-14 3:28am

now iam getting the values in div wat i selected but i want all the values in the second dropdown

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 4:50am

He wants all the values. I can help, but I am busy at work. :(

Narendra Naidu89 18-Feb-14 4:57am

hai Tadit Dash please help quick as possible sir...iam stuk thr it self...pls help me

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 5:05am

Check my answer. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 5:05am

I have done this. It was easy. Please see my answer. :)

Narendra Naidu89 18-Feb-14 5:21am

ya its working sir please tell me whr i have to place your code into my code

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 5:27am

Please check my answer again. I have updated.

Please mark it as answer and up-vote. :)

Narendra Naidu89 18-Feb-14 5:33am

Its working thank u very much Mr.Tadit dash.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 5:34am

Most welcome buddy. :)

Narendra Naidu89 18-Feb-14 5:38am

now i want small suggestion..now we are displaying all values know.Again if u click on the any one of the value on the displayed values we have to get the respected data using ajax call..please suggest me how to do this..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 6:49am

Then you have to show some button or links inside that.
See the function showDiv(), which just appends the value. Instead of appending only the value, create a dynamic button control and append that.

While creating that, you need to declare the click event.

Define that event inside script tags and do Ajax call and needed operations.

Narendra Naidu89 18-Feb-14 7:00am

can u send code for tat.i thought that we can use Href tag for tat..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 7:42am

Look I am busy today. Can't be able to do it. Please try yourself.
I have suggested the logic. You just need to go ahead and code something.
If you face specific issue, then come back and add another question.

Narendra Naidu89 18-Feb-14 7:49am

kkk..thank u

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Feb-14 8:47am

Welcome. :)

Narendra Naidu89 19-Feb-14 7:02am

hi tadit dash i tried but its not working..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Feb-14 12:46pm

Okay. Do one thing. Add another question explaining that and post the codes which you have tried. Give me the link here. I will take a look tomorrow when I reach office.

Narendra Naidu89 19-Feb-14 23:00pm

Hi Tadit Dash this is the link http://www.codeproject.com/Questions/730401/I-want-to-display-the-respected-data-when-we-click

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Feb-14 23:34pm

Ok. I am checking that. :)

Narendra Naidu89 20-Feb-14 2:43am

i will wait for ur rply Mr.Tadit Dash

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Feb-14 3:08am

Ok, thanks. :)

Narendra Naidu89 20-Feb-14 3:20am

if u dont mind i want tis tonight Mr.tadit dash

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Feb-14 3:21am

I am going for lunch. Will definitely look at it after I come back. :) Don't worry.

Narendra Naidu89 20-Feb-14 4:08am

kk Tadit

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-02-17T23:04:00

Please check the Demo - [Issue] Show all values of DropDownList in Div[^].
It does what you need.

Just modify the showDiv() function like...

JavaScript

function showDiv() {
    var ddlSubCategory = document.getElementById('subCategory');

    for (i = 0; i < ddlSubCategory.options.length; i++) {
        document.getElementById('sidebar-left').innerHTML += ddlSubCategory.options[i].value + "<br/>";
    }
}