We Keep Coding

Apply displayNone to certain class depending on selected field in other classes

I am trying to hide an element when a certain option value is selected from a fieldset drop down. I am unsure how to use jQuery to read the text contained in the option value (either the actual text or the value is fine):
<div class="filter_options">
<input id="search_query" type="hidden" value="Texts" />
<fieldset class="filterType">
<label>Filter By Type</label><select id="search_filter_type">
<option value="">All</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option></select></fieldset>
</div>
and then hide the certain div classes "pg_list" which do not contain the selected value.
<div class="pg_list">
<p>This text contains a Dog</p>
</div>
<div class="pg_list">
<p>This text contains a Cat</p>
</div>
<div class="pg_list">
<p>This text contains a Rabbit</p>
</div>
So If I choose option value - Cat, then it would hide the div containing Dog or Rabbit, and leave Cat.
Lastly, I have the following .css ready to go:
.displayNone{
display: none;
}
Hopefully this makes sense. Here is my jQuery for a input text field which works, but I can't work out how to use the same basis to work for a selected drop down:
$('input').on('keypress keyup', function(){
var value = $(this).val().toLowerCase();
if (value != '') {
$('.pg_list').each(function () {
if ($(this).text().toLowerCase().indexOf(value) > -1) {
$(this).removeClass('displayNone');
} else {
$(this).addClass('displayNone');
}
});
} else {
$('.pg_list').removeClass('displayNone');
}
});
Thank you for reading.

First, you need to select the correct component, which is the dropdown box: $('#search_filter_type'). Second, you want this to occur when the value of the dropdown box is changed: $('#search_filter_type').on('change', ...
$('#search_filter_type').on('change', function() {
var value = $(this).find('option:selected').text().toLowerCase();
if (value != "all") {
$('.pg_list').each(function() {
if ($(this).text().toLowerCase().indexOf(value) > -1) {
$(this).removeClass('displayNone');
} else {
$(this).addClass('displayNone');
}
});
} else {
$('.pg_list').removeClass('displayNone');
}
});
.displayNone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter_options">
<input id="search_query" type="hidden" value="Texts" />
<fieldset class="filterType">
<label>Filter By Type</label>
<select id="search_filter_type">
<option value="">All</option>
<option value="Cats">Cat Pictures</option>
<option value="Dogs">Dog Pictures</option>
</select>
</fieldset>
</div>
<div class="pg_list">
<p>This text contains a Dog Pictures</p>
</div>
<div class="pg_list">
<p>This text contains a Cat Pictures</p>
</div>
<div class="pg_list">
<p>This text contains a Rabbit</p>
</div>

In jQuery, to read the value of a <select>, it's the same as <input>:
$('#my-select').val(); // where this is your select
You can put it in a change event, which is what fires when it is changed:
$('#my-select').on('change', function() {
var value = $(this).val().toLowerCase();
// rest of your code
});
If you want the text of the selected option, you can use this instead:
$('#my-select').on('change', function() {
var value = $(this).find('option:selected').text();
// rest of your code
});
A slight improvement to your design though would be to add a class to each of your <div> elements which match the value of your options. Then, instead of having to loop through, you can use not() to set it on everything except the one you want to leave visible.
$('select').on('change', function () {
var value = $(this).val();
$('#divs').children() // all children of the proper parent
.removeClass('displayNone') // remove 'displayNone' from them all
.not('.' + value) // remove the one we aren't hiding
.addClass('displayNone'); // add 'displayNone' to all remaining
});
.displayNone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">-- Select --</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="rabbit">Rabbit</option>
</select>
<div id="divs">
<div class="cat">Cat</div>
<div class="dog">Dog</div>
<div class="rabbit">Rabbit</div>
</div>
By doing it this way, you aren't locking yourself in to them always having matching text, giving you better flexibility. You also don't have to loop through and do a text comparison.

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>

displaying Multiple select option in diiferent line

I have a multiple select option that display the result in a div container, when click on ctrl+"orange""apple""banana" the result display: "orange, apple, banana" in one line, but i want to display each result in a new single line with a link that goes to different page like this:
Orange - "goes to a link"
Apple - "goes to a link"
Banana - "goes to a link"
Here are my codes below:
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript">
</script>
<select name="" multiple="multiple" id="select-custom-19">    
<option>Add Fruits</option>        
<option value="orange" selected>orange</option> 
<option value="apple">apple</option>
<option value="banana">banana</option>             </select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').text($(this).val());
});
});
</script>
your help will be highly appreciated.
Thanks

You can try adding <br/> element after every selected option. I have used <label> element but you can add link or any other element you want
$(document).ready( function ()
{
$('#select-custom-19').change(function(){
$('#yourfruit').empty();
var values = $(this).val();
for(var i=0; i < values.length ; i++)
{
$('#yourfruit').append('<lable>'+values[i]+'</label><br/>');
}
});
});
JSFiddle Demo

You can iterate throug items and display them, append an anchor (<a />) and use <br /> for a new line.
Make sure to add .empty() to clean the fruits from list before .append() other items to $('#yourfruit'), like in example below.
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit]+" - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit] + " - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
});
});
.tab-btn {
color: red;
}
.tab-btn:hover {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; ">
<span id="yourfruit"> </span>
</div>

try below
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903; color:#000000; margin: 10px; ">
<ul id="yourfruit">
</ul>
</div>
<script type="text/javascript">
$(document).ready( function ()
{
$('#select-custom-19').change(function()
{
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').append('<li>'+$(this).val()+'</li>');
}
);
});
</script>

You may add HTML tags as per your requirements, like <a> or </br>
$(document).ready(function () {
$('#select-custom-19').change(function () {
$('#yourfruit').text("");
if($(this).val() != null)
{
$(this).val().forEach(function (value, index) {
$('#yourfruit').append("<a href='#'>" + value + "</a></br>");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>

JavaScript hiding and showing form elements

Options:
<select id="selectOption" name="Option">
<option value="">Choose Option</option>
<option value="option1">1</option>
<option value="option2">2</option>
</select>
<div id="option1" class="">
//form element here//
</div>
<div id="option2" class="">
//form element here//
</div>
My question is, using JavaScript, how do make it so that at the start you don't see the 2 divs at the bottom? When you choose option 1, it should only show the first div and if you choose option2 it shows the second div.

You can do it like:
<select id="selectOption" name="Option" onchange="optionSelect()">
<option value="">Choose Option</option>
<option value="option1">1</option>
<option value="option2">2</option>
</select>
<div id="option1" style="display:none">
DIV1
//form element here//
</div>
<div id="option2" style="display:none">
DIV2
//form element here//
</div>
Then in script:
function optionSelect(){
var e = document.getElementById("selectOption");
var strUser = e.options[e.selectedIndex].value;
document.getElementById(strUser).style.display = "block";
}
What i'm doing is listening for option change, whenever option is changing im getting its value and making the div with that option value visible display='block'
See the DEMO here

You can make both the divs hidden by default and trigger an onchange on the select.
In the javascript function, check the value and hide/show the corresponding div.
<select id="selectOption" name="Option" onchange='checkOption()'>
Javascript:
function checkOption() {
document.getElementsByTagName('div').style.display = 'none';
document.getElementById(document.getElementById('selectOption').value).style.display = 'block';
}

You could do it like this
<select id="selectOption" name="Option" onChange="showDiv(this)">
<option value="">Choose Option</option>
<option value="option1">1</option>
<option value="option2">2</option>
</select>
<div id="option1" class="" style="display:none;">
//form element here option 1//
</div>
<div id="option2" class="" style="display:none;">
//form element here option 2//
</div>
<script>
function showDiv(selectObj){
var valueSelected= selectObj.value;
// hide all div again
document.getElementById('option1').style.display = "none";
document.getElementById('option2').style.display = "none";
// show the selected
document.getElementById(valueSelected).style.display = "block";
}
</script>
The showDivfunction is called everytime you are selecting an option from the select.
In the function, it gets the value, since the value is the id of the div you can use it as the identifier.
First hide both div then display the selected, doing it when user selects the very first it will hide both.

algorithm to do what you've asked:
Initially hide all the divs
set the id's of div's equal to select option tag values
use onchange function of select tag and call a function
in that function hide all other divs and show corresponding div only.
Here is he jsbin.
http://jsbin.com/pewihumokunu/1/edit

Choose fields to hide/show acording to selected option in dropdown (while edit)

EDITED : (corected code mistake)
I have created a form with several fields, chosen via a dropdown.
This works fine and I can save the data to database.
But the problem is that when I need to edit the data with the form, the jQuery "change" function isn't triggered and the fields shown aren't selected with the dropdown (value of the dropdown is save too).
How can I achieve this? Maybe another jQuery function would be better?
This is my markup and code:
html:
<body>
<div class="div1">
<label class="label1">label1</label>
<select id="select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="div2">
<label class="label2">label2</label>
<input type="text" name="input1" class="input1">
</div>
<div class="div3">
<label class="label3">label3</label>
<input type="text" name="input2" class="input2">
</div>
<div class="div4">
<label class="label4">label4</label>
<input type="text" name="input3" class="input3">
</div>
<div class="div5">
<label class="label5">label5</label>
<input type="text" name="input4" class="input4">
</div>
</body>
jQuery:
$(document).ready(function() {
$('.div2').hide();
$('.div3').hide();
$('.div4').hide();
$('.div5').hide();
$('#select').change(function () {
if ($('#select option:selected').text() == "option1"){
$('.div2').show();
$('.div3').hide();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option2"){
$('.div2').hide();
$('.div3').show();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option3"){
$('.div2').hide();
$('.div3').hide();
$('.div4').show();
$('.div5').show();
}
});
});
</script>
JSFiddle: http://jsfiddle.net/YNnCw/

If you are willing to use jQuery, I wrote a little script to do just that.
This is just a simple little function to show the data which matches the chosen option in the select with choose Option. First it hides all the option class items, then is shows the items with the class which equals the chosen option. The id is the class of all the options used for this instance. This allows you to have more than one of these on a page.
You can look at the example below.
The rows in the form show or don't show based on the classes. For example . The "optionName" in the div class is the same as the ID of the master selector, and thus gets hidden. If the selection value
is option3 then that div will show.
Option Type:
<select name="optionName" id="optionName" class="chooseOption">
<option value = "" >Select a Type</option>
<option value = "option1">option1</option>
<option value = "option2">option2</option>
<option value = "option3">option3</option>
</select>
<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>
<script type="text/javascript">
$(".optionName").hide();
$("document").ready(function() { /// have to wait till after the document loads to run these things
$("select.chooseOption").change(function(){
$("."+this.id).hide();
var thisValue = $(this).val();
if (thisValue != "")
$("."+thisValue).show();
});
});
</script>

You make a mistake it should be:
$('#select option:selected').text()
here the updated fiddle