Solved

Boostrap dropdown on change

Posted on 2015-02-17
3
132 Views
Last Modified: 2016-02-25
Hi I would like to achive a dropdown on change function to work with bootstrap dropdown .

on select of dropdown value i have show and hide content divs. each dropdown value i have different div to show.. it should not overlap each other i mean to say one time it should only show one div. remaining things needs to hidden. by defulat one value needs to selected that is xml and his content.

below is the code for the drop down

 <div class="btn-group" id="service_type">
                        <button type="button"  class="btn btn-default dropdown-toggle endPoint_type" data="xml" data-toggle="dropdown"> XML <span class="caret caret_right"></span></button>
                          <ul class="dropdown-menu endpoint-icons" role="menu" id="opdropdown">
                             <li role="presentation" class="dropdown-header">Technology Adapters</li>
                             <li class="xml"><a href="javascript:void(0)" > XML</a></li>
                             <li class="soap" id="soap"><a href="javascript:void(0)" > SOAP</a></li>
                             <li class="json"><a href="javascript:void(0)"> JSON</a></li>
                             <li class="java"><a id="java" href="javascript:void(0)"> Java</a></li>
                             <li role="presentation" class="dropdown-header">Business Adapters</li>
                             <li class="salesfor" id="salesforce"><a href="javascript:void(0)"> Salesforce</a></li>
                             <li class="sap"><a id="sap" href="javascript:void(0)">  SAP gateway</a></li>
                          </ul>
                      </div>

and attached image for your reference which im looking at to achieve . any one can help please
0
Comment
Question by:sastry_hora
  • 2
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40614929
jQuery:
$('.dropdown-menu li').on('click', function(){
		$('div.hiddenDiv').hide();
		var divClass = $(this).attr('class');
		$('div.' + divClass + ' p').text('This is the hidden div for the ' + divClass + ' dropdown selection.');
		$('div.' + divClass).show();
	});
	$('div.hiddenDiv button').on('click', function(){
		$('div.hiddenDiv').hide();
	});

Open in new window

HTML:
<div class="btn-group" id="service_type">
                        <button type="button"  class="btn btn-default dropdown-toggle endPoint_type" data="xml" data-toggle="dropdown"> XML <span class="caret caret_right"></span></button>
                          <ul class="dropdown-menu endpoint-icons" role="menu" id="opdropdown">
                             <li role="presentation" class="dropdown-header">Technology Adapters</li>
                             <li class="xml"><a href="javascript:void(0)" > XML</a></li>
                             <li class="soap" id="soap"><a href="javascript:void(0)" > SOAP</a></li>
                             <li class="json"><a href="javascript:void(0)"> JSON</a></li>
                             <li class="java"><a id="java" href="javascript:void(0)"> Java</a></li>
                             <li role="presentation" class="dropdown-header">Business Adapters</li>
                             <li class="salesfor" id="salesforce"><a href="javascript:void(0)"> Salesforce</a></li>
                             <li class="sap"><a id="sap" href="javascript:void(0)">  SAP gateway</a></li>
                          </ul>
                      </div>
        <div class="hiddenDiv xml"><button>X</button><p></p></div>
        <div class="hiddenDiv soap"><button>X</button><p></p></div>
        <div class="hiddenDiv json"><button>X</button><p></p></div>
        <div class="hiddenDiv java"><button>X</button><p></p></div>
        <div class="hiddenDiv salesfor"><button>X</button><p></p></div>
        <div class="hiddenDiv sap"><button>X</button><p></p></div>

Open in new window

As written, it will only work if each dropdown item has a single unique class name.
0
 

Author Closing Comment

by:sastry_hora
ID: 40614963
Exactly what i needed but at first load all div is showing up i added display none for each of them its working as expected.. thanks so much for quick help
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40615102
Sorry, forgot to include my css for the hidden divs.

div.hiddenDiv {
            width:300px;
            height:200px;
            background-color:#def;
            display:none;
            position:absolute;
            top:300px;
            left:300px;
      }

Thanks for the points.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now