Use anchors in "Select" drop down list - javascript

Alright, so I have a currently functioning drop down list that displays a hidden div of content on the same page when that items is selected from the dropdown. The problem is I need to be able to have this same code as an anchor or something that will allow me to call up that particular section either when referencing that page from another page or by simply navigating back to the page after having moved forward in the content.
Here is the script:
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
</script>
And my page content:
<div id="mental_lever_collection">
<div class="menu"><span class="title">Choose a Mental Lever Collection</span>
<select id="category_select" class="select">
<option value="#option1">Mental Levers & Leveraged Thinking</option>
<option value="#option2">Zero Aggression Basics</option>
</select></div>
<div id="option1" class="box">
Some Content
</div>
<div id="option2" class="box">
Some Content
</div>
</div>
If you have any ideas on how to tweak this to get the desired effect it would be greatly appreciated.

Fiddle Demo
Try this
$(document).ready( function() {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
var test = $(this).val();
console.log(test);
$(test).show();
});
});

There is an extra '#' in your code.
Please change $('#'+$(this).val()).show(); to $($(this).val()).show();
Hope this help you to solve the problem :
Full jquery code
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$($(this).val()).show();
});
});
</script>

Related

How can I show div according to the selected value? [duplicate]

Here is my code. Why it doesn't work?
<Script>
$('#colorselector').change(function() {
$('.colors').hide();
$('#' + $(this).val()).show();
});
</Script>
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> .... </div>
<div id="yellow" class="colors" style="display:none"> ... </div>
<div id="blue" class="colors" style="display:none"> ... </div>
You're running the code before the DOM is loaded.
Try this:
Live example:
http://jsfiddle.net/FvMYz/
$(function() { // Makes sure the code contained doesn't run until
// all the DOM elements have loaded
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
<script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#divid").show();
}
else
{
$("#divid").hide();
}
});
});
</script>
Do like this for every value
To show the div while selecting one value and hide while selecting another value from dropdown box: -
$('#yourselectorid').bind('change', function(event) {
var i= $('#yourselectorid').val();
if(i=="sometext") // equal to a selection option
{
$('#divid').show();
}
elseif(i=="othertext")
{
$('#divid').hide(); // hide the first one
$('#divid2').show(); // show the other one
}
});
You are missing a :selected on the selector for show() - see the jQuery documentation for an example of how to use this.
In your case it will probably look something like this:
$('#'+$('#colorselector option:selected').val()).show();

jQuery change event on dropdown

I just added the query lib to my web app and tested with simple alert:
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$(function(){
alert('jquery is working');
});
</script>
And works fine. However when i want to implement an "change" event on my dropdown
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$("#projectKey").change(function() {
alert($('option:selected', $(this)).text());
});
</script>
it displays me no alert, basically nothing is happening. My drop down is the following:
<select id="projectKey" name="projectKey">
<option value="AM">AM</option>
<option value="AIL">AIL</option>
<option value="NEB">NEB</option>
<option value="SSP">SSP</option>
</select>
Of course i tried to simplify the javascript, just o have
$("#projectKey").change(function() {
alert("test");
});
but still no joy. It will be something with the selector or the drop down. Tried also "select#projectKey" but the result was of course the same. Any idea what i am doing wrong?
You should've kept that DOM ready function
$(function() {
$("#projectKey").change(function() {
alert( $('option:selected', this).text() );
});
});
The document isn't ready if you added the javascript before the elements in the DOM, you have to either use a DOM ready function or add the javascript after the elements, the usual place is right before the </body> tag
Please change your javascript function as like below....
$(function () {
$("#projectKey").change(function () {
alert($('option:selected').text());
});
});
You do not need to use $(this) in alert.
Or you can use this javascript
$(function () {
$("#projectKey").change(function () {
alert($('#projectKey option:selected').text());
});
});
The html
<select id="drop" name="company" class="company btn btn-outline dropdown-toggle" >
<option value="demo1">Group Medical</option>
<option value="demo">Motor Insurance</option>
</select>
Script.js
$("#drop").change(function () {
var category= $('select[name=company]').val() // Here we can get the value of selected item
alert(category);
});

Hiding the closest div with the specified class

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()

Issue displaying divs using show.hide?

Hi I have some javascript which works in a standalone web page with 5 divs, what it does is when an option is selected it will show a div and hide the others based on drop down selection.Basically what the code does is when a sector is selected on the drop down that corresponding DIV will be displayed eg pubs.
The problem I am having is in the web page I want this working on I have lots of Div tags and when the page loads all the Divs on the page are hidden, obviously I don't want this.
Any help would be much appreciated
The code that hides all the divs on page load is
$('div').not(name).hide();
Is there a way of solving this problem I cant see how I am going to get round it at the moment.?
JS
<script>
$(document).ready(function () {
function showTab( name )
{
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTab( $( this ).val() );
});
showTab( $('#dropdown').val() );
});
HTML
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pub-Chains" selected="selected">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
My Div's are named like so
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
You have to group up the div you want to participate in show hide to separate them from other divs on the page. You can assign a common class to them and use that class to hide them.
Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"
$('div.opt').hide();
$(document).ready(function () {
var ddl = $("#dropdown");
$('#' + ddl.val()).show().siblings().hide();
ddl.change(function () {
$('#' + $(this).val()).fadeIn().siblings().hide();
});
});
See demo
If your target <div>s are all siblings then you can easily do something like follows.
<div>
<div id="Pub-Chains">
<div id="Councils">
<div id="Property">
...
</div>
$(function(){
$("select#dropdown").change(function(){
$('#' + $(this).val()).show().siblings().hide();
}).change();
});
See it here.
If you have a more complicated layout then you can think of using classnames to group the <div> elements.
try this:
$(document).ready(function () {
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
and if this is not working then you can do this just put it outside of doc ready handler
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
$(document).ready(function () {
// then all your change stuff here
create a parent div to all this div... and call it in selector..
try this
<div id="tabdivs">
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
</div>
jquery
*updated*
$('#tabdivs').children().not(name).hide();
fiddle here..

Unable to set Focus to drop down list using jquery on mouse enter

Here is my html code
<div id="mnc"> hello
</div>
<div id="slpt">
<select id="slt">
<option value="0">Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</div>
Here is my jquery code
$(document).ready(function(){
$('#mnc').bind({
mouseenter: function(e) {
$('#slt').attr('selected', 'Option1');
}
});
});
here is a working model on jsfiddle
The Issue: after i click on drop down list but do not select an element i hover on hello text in above div.I wanted the drop down list to be set to a default Option1 on mouse hover.But its not working.Can any one throw some light on whats goin wrong.
EDIT:
Below is the condition when i hover on the hello text.I haven't selected Option4
you can also try this code:
$(document).ready(function(){
$('#mnc').bind({
mouseenter: function(e) {
$("#slt").find('option:first').attr('selected', 'selected');
}
});
});
​
You don't put selected="option1" on the <select>, you put selected="selected" on the <option>
Like this
$(document).ready(function(){
$('#mnc').bind({
mouseenter: function(e) {
$('#slt option:first-child').attr('selected', 'selected');
}
});
});
Just use:
$('#slt').val('0');
to select the option.
http://jsfiddle.net/fzpN4/4/
$(document).on("mouseenter","#mnc",function(e) {
$('#slt').val('0');
});
you can do it like this
$(document).ready(function(){
$('#mnc').bind({
mouseenter: function(e) {
$('#slt').val('Option1');
}
});
});
DEMO
​
$(document).ready(function(){
$('#mnc').bind({
mouseenter: function(e) {
$('#slt').val('0').focus(); // it will set focus on first option.
}
});
});
Ok so here is working model of my question
Here is the html code
<div id="mnc"> hello
</div>
<div id="slpt">
<select id="slt">
<option value="0">Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</div>
Here is the Jquery code
$(document).ready(function(){
$('#mnc').mouseover(function() {
$('select').hide().blur().show();
});
});
here it is in jsfiddle

Categories

Resources