We Keep Coding

addClass to div on change of dropdown selection

I have the following dropdown:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
Below this I have the following divs:
<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>
These are set to display:none using css
I'm trying to make it so when I select the name from the dropdown, the class "visible" is added to the corresponding div - and then removed again if the selection is changed again.
Here is what I have tried so far, but with no luck:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val()).addClass('visible');
});
});

Here is how I would do this:
html:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="nothing">Select One</option>
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="Toni">toni</div>
<div class="singer_profile_overview" id="Jack">jack</div>
<div class="singer_profile_overview" id="James">james</div>
jquery:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
var $this = $(this);
$('.singer_profile_overview').removeClass('visible');
$('#' + $this.val()).addClass('visible');
});
});
Couple of notes:
It is a good practice to store $(this) in a local variable, I usually call it $this.
You had an upper case / lower case problem in your original code. The id of the class to update needs to match the id you call in your selector
Remove the visible class from every <div> prior to applying one.
And there is still one problem, if you click your dropdown and select the first option, the event will not fire because nothing changed. That is why I added a 'Select One' option.
And here is a fiddle.

Try this. You also need to convert the value to lowerCase() to get the exact match.
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">toni</div>
<div class="singer_profile_overview" id="jack">jack</div>
<div class="singer_profile_overview" id="james">james</div>
<style>
.singer_profile_overview
{
display:none;
}
.visible
{
display: block
}
</style>
<script>
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('.singer_profile_overview').removeClass('visible'); // hide all divs by removing class visible
$('#' + $(this).val().toLowerCase()).addClass('visible'); // find the matching div and add class visible to it
});
});
</script>
Example : http://jsfiddle.net/RxguB/204/

It is because the value of the dropdown are capitalized, while your ids are lowercase. Consider the following:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val().toLowerCase()).addClass('visible');
});
});
Or alternatively, you can manually change the values to lower case, or the ids to be capitalized to match the values.

To answer the question as it was asked:
$("#about_performance_lead_singer").on("change", function(){
$(".singer_profile_overview").removeClass("visible");
$("#" + $(this).val().toLowerCase()).addClass("visible");
});
However, if you're only using the class "visible" to toggle their display, you can replace
removeClass("visible")
with
hide()
and
addClass("visible")
with
show()

Use the :selected selector to find the option that was selected. We can get its value by calling the prop method and passing in value as an attribute. Since the ids we are trying to get are lowercase, we use the toLowerCase() method.
The div we're trying to get is of the class .singer_profile_overview. We should use the filter function to get the ids. We store the result of this filter in a jQuery variable and finally add a class to it.
$("#about_performance_lead_singer").change(function () {
var selectedValue = $(":selected").prop("value").toLowerCase();
var selectedDiv = $(".singer_profile_overview").filter(function() {
return $(this).prop("id") == selectedValue;
});
selectedDiv.addClass('visible');
});
.visible {
color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">Toni</div>
<div class="singer_profile_overview" id="jack">Jack</div>
<div class="singer_profile_overview" id="james">James</div>

What is a better way to use less code to hide and display select menu content? javascript

UPDATE The option values are not incremental, does that matter? Eg. one option could be apples, the next could be dog
I have multiple drop down menus with multiple options and every time I select an option I display different information but in order to hide it to display a different option's information, I have to compare the current option's value and if it matches, hide it, then show the new option's information.
As an example:
drop-down select menu
<select name="name_of_select_menu" onchange="showContent(value);">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
javascript
<script type="text/javascript">
function showContent($i) {
if($i=="apple"){
document.getElementById('apple').style.display = "inline-block";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "inline-block";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "inline-block";
}
}
content to be displayed
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>
As you can see, this can become a lot... I have like 20 options for one menu... 19 things to check if open and close, then open the actual one that you want to see.

Update:
function showContent(i) {
$(".content>div").hide(); //for arbitrary keywords.
$('div#' + i).css("display", "inline-block");
}
Change the function to:
function showContent(i) {
$("[id*=option]").hide();
$('#' + i).css("display", "inline-block");
}
Read more about attribute selectors

use below code. Check working DEMO
JQUERY
$(document).ready(function(){
$('.content div').hide();
$(document).on('change','select[name="name_of_select_menu"]',function(){
$('.content div').hide();
$('#'+$(this).val()).show();
});
});
HTML
<select name="name_of_select_menu">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>

Using jquery, you can write:
function showContent(i)
document.getElementById(i).style.display = "inline-block";
$("select[name=name_of_select_menu]").find("option").not("option[id=="+i+"]").hide();
}

jsFiddle (Updated)
You can simplify this in a few different ways. Move the change handler out of the HTML and bind to the DOM element directly from your JS. Then capture the value of the form element dynamically, and use that to determine which element to show.
Since you're toggling the visibility of the elements, you need a way to hide all of the elements at once. You can do this using$('.content > div').hide() to hide all of the elements and then $('#yourId').show() to show a specific one.
HTML:
<select name="name_of_menu">
<option value="">label option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
JS (using jQuery):
$(function () {
$('[name="name_of_menu"]').change(function () {
$('.content > div').hide();
$('#' + $(this).val()).css("display", "inline-block");
});
});

Change the CSS attribute if an option selected with jQuery

I have this code:
<select>
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
Now I want when user select each of them some div that hidden in css with display:none; get visible for example when user select Question the div that have question id get visible or when Password selected the div that have password id get visible.
I try this but not work:
$(document).ready(function(){
if ($("#auth option:selected").text() == "question"){
$("#question").css("display","block");
}
});
So how can I do this?

If you follow the pattern you have done so far, you have to write code for each option. If your options and div elements are coupled with value and id, you can simply do like this,
$("select").change(function() {
$("div").hide();
$("#" + $(this).val()).show();
});
Demo Fiddle

Here is Demo for this , remove disabled from select tag so that user can select the options
Jsfiddle
http://jsfiddle.net/adarshkr/z9gcf40r/2/
Code
HTML
<select id="showdiv">
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
<div id="question" class="hide">
<p>question</p>
</div>
<div id="password" class="hide">
<p>password</p>
</div>
<div id="email" class="hide">
<p>email</p>
</div>
<div id="none" class="hide">
<p>none</p>
</div>
CSS
.hide{
display:none
}
JAVASCRIPT
$("select").change(function(){
$("div").hide();
$("#"+$(this).val()).show();
});

try this,
$('#auth').on('change', function() {
var that = $(this).val();
if (that === "question"){
$("#question").css("display","block");
}
});

Better check value than the text.
$(document).ready(function(){
if ($("#auth option:selected").val() == "question"){
$("#question").css("display","block");
}
});

Show divs based on dropdown - Script not working

I'm trying to show div's based on dropdown selection using the following script.
It works perfectly on a simple page without any thing in it; but when I put it in the page that I'm developing, it messes up the entire page, making it black and at the end of the URL I get this ...../myPage.html#someIdInThePage .
JS:
<script type="text/javascript">
$(document).ready(function () {
function showTheTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change(function () {
showTheTab($(this).val());
});
showTheTab($('#dropdown').val());
});
</script>
HTML:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" 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>
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>

This line: $('div').not(name).hide(); will hide every div on your page apart from the selected div. You're going to need a more specific selector to do the hiding
Example
Javascript:
$(document).ready(function () {
function showTheTab( name )
{
name = '#' + name;
$('div.Tabs > div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTheTab( $( this ).val() );
});
showTheTab( $('#dropdown').val() );
});
Html:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" 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>
<div class="Tabs">
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>
</div>

Change the content of a div based on selection from dropdown menu

Is there a simple way, using JavaScript, to dynamically show/hide content in a <div> based on the users selection from a drop down menu? For example, if a user selects option 1 then I would like <div> 1 to be displayed and all other <div>s to be hidden.
EDIT: Example HTML Setup
<select>
<option> Option 1</option>
<option> Option 2</option>
<option> Option 3</option>
<select>
<div id="content_1" style="display:hidden;">Content 1<div>
<div id="content_2" style="display:hidden;">Content 2<div>
<div id="content_3" style="display:hidden;">Content 3<div>

The accepted answer has a couple of shortcomings:
Don't target IDs in your JavaScript code. Use classes and data attributes to avoid repeating your code.
It is good practice to hide with CSS on load rather than with JavaScript—to support non-JavaScript users, and prevent a show-hide flicker on load.
Considering the above, your options could even have different values, but toggle the same class:
<select class="div-toggle" data-target=".my-info-1">
<option value="orange" data-show=".citrus">Orange</option>
<option value="lemon" data-show=".citrus">Lemon</option>
<option value="apple" data-show=".pome">Apple</option>
<option value="pear" data-show=".pome">Pear</option>
</select>
<div class="my-info-1">
<div class="citrus hide">Citrus is...</div>
<div class="pome hide">A pome is...</div>
</div>
jQuery:
$(document).on('change', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('change');
});
CSS:
.hide {
display: none;
}
Here's a JSFiddle to see it in action.

here is a jsfiddle with an example of showing/hiding div's via a select.
HTML:
<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
jQuery:
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});

With zero jQuery
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv {
display: none;
}
</style>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="content_1" class="inv">Content 1</div>
<div id="content_2" class="inv">Content 2</div>
<div id="content_3" class="inv">Content 3</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>
Codepen
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
.inv {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="content_1" class="inv">Content 1</div>
<div id="content_2" class="inv">Content 2</div>
<div id="content_3" class="inv">Content 3</div>
</body>
</html>

Meh too slow. Here's my example anyway :)
http://jsfiddle.net/cqDES/
$(function() {
$('select').change(function() {
var val = $(this).val();
if (val) {
$('div:not(#div' + val + ')').slideUp();
$('#div' + val).slideDown();
} else {
$('div').slideDown();
}
});
});

I am not a coder, but you could save a few lines:
<div>
<select onchange="if(selectedIndex!=0)document.getElementById('less_is_more').innerHTML=options[selectedIndex].value;">
<option value="">hire me for real estate</option>
<option value="me!!!">Who is a good Broker? </option>
<option value="yes!!!">Can I buy a house with no down payment</option>
<option value="send me a note!">Get my contact info?</option>
</select>
</div>
<div id="less_is_more"></div>
Here is demo.

There are many ways to perform your task, but the most elegant are, I believe, using css.
Here are basic steps
Listening option selection event, biding adding/removing some class to container action, which contains all divs you are interested in (for example, body)
Adding styles for hiding all divs except one.
Well done, sir.
This works pretty well if there a few divs, since more elements you want to toggle, more css rules should be written. Here is more general solution, binding action, base on following steps:
1. find all elements using some selector (usually it looks like '.menu-container .menu-item')
2. find one of found elements, which is current visible, hide it
3. make visible another element, the one you desire to be visible under new circumstances.
javascript it a rather timtoady language )