addClass to div on change of dropdown selection - javascript

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>

Related

Change a options value when selected from options

i have a drop-down that has values which are exceeding the current div's width. i want to show only a part of the text when that option is selected. i tried extending the width but the form structure is getting messed up.
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
how can i achieve this using jQuery ?
the expected output is that when the option $2.00/month(12 months) is selected it shows as $2.00/month in the drop-down.
The solution comes with the onchange and onmousedown event. Using jQuery's selectors we can get the selected option and change its display HTML.
//you really don't need jQuery, but we can wrap it in there.
//wrap in ready function to make sure page is loaded
$(document).ready(function() {
$("select#g-suite-pac-id").on("change", function() {
var text = $(this).children("option").filter(":selected").text()
var edited = text.match(/^.+?\/month/); //use regex | ^ start, .+? lazy search for everything until /month
//save
$(this).children("option").filter(":selected").data("save", text);
//change
$(this).children("option").filter(":selected").text(edited);
});
$("select#g-suite-pac-id").on("mousedown", function(e) {
//restore a saved value
var selected = $(this).children("option").filter(":selected");
if (selected.length > 0)
{
if (selected.data("save"))
{
selected.text(selected.data("save"));
selected.removeData("save");
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
Set width of select component to any fixed width like below:
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package" style="width:96px">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)dffsdfsdfdsfsdfdsfdsfsd</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
try above code, it shows text that can fit in 96px width.

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.

Hide div if does not have HTML attribute

I have the following code, its supposed to reorder my divs within #list. And it does that just fine. Now what I want to add is: if a div does not have the attribute "data-l-disc" don't add it/hide it.
<select id="selectid">
<option id="valid1" value="def">Default order</option>
<option id="valid2" value="hl">h-l</option>
</select>
<div id="list">
---------the follow div is used about 50*-------------
<div class="dbl" data-l-disc="1">
---------blabla (like 10 other divs are in here)----------
</div>
</div>
jQuery(document).ready(function( $ ) {
$('select').on('change', function() {
if(document.getElementById('selectid').value == "hl") {
var dList = $(".dbl");
dList.sort(function(a, b){ return $(b).data("l-disc")-$(a).data("l-disc")});
$("#list").html(dList);
}
})
});
you can hide it by using
$(".dbl").not("[data-l-disc]").hide()

display 2 div's according to select options using jquery?

I am using the following code to display div's according to the select option in the HTML using jquery. this works fine.
however, I need to know how I can display both of them if the option front an back is selected?
here is my current code:
JS:
<script language="javascript">
$(function() {
$('#Field169').change(function(){
$('.myDivs').hide();
$('#' + $(this).val()).show();
});
});
</script>
html:
<div class="myDivs" id="Front" align="center>Front</div>
<div class="myDivs" id="Back" align="center>Back</div>
<select id="Field169">
<option value="WHAT DO I NEED HERE??">Front and Back</option>
<option value="Front">Front Only</option>
<option value="Back">Back Only</option>
</select>
<option value="Front, #Back">Front and Back</option>
You can't do it if you're referencing by IDs, but if you gave them classes with those same names instead, and your option values looked like .front and .back then your combined option could have the value value=".front, .back" and the selector would get both of them. You would want to change the function to look like:
$($(this).val()).show();
rather than selecting by ID
You could leave the value blank and then change your jquery:
$('#Field169').change(function(){
var selectedValue = $(this).val();
if (selectedValue === '') {
$('.myDivs').show();
} else {
$('.myDivs').hide();
$('#' + selectedValue).show();
}
});
Example
$('#Field169').change(function(){
var getvalue=$(this option: selected).text();
if(getvalue=='Front and Back')
{
$('#front').show();
$('#back').show();
}
});

How to hide and show a div when click on text box using jQuery

How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
Here: http://jsfiddle.net/Kq9pX/
JS
Do it on load: Wrap around document.ready function.
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
<option value="All">All</option>
Must be cleared:
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
Use jQuery:
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.

Categories