• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 146
  • Last Modified:

Boostrap dropdown on change

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
sastry_hora
Asked:
sastry_hora
  • 2
1 Solution
 
Tom BeckCommented:
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
 
sastry_horaAuthor Commented:
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
 
Tom BeckCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now