I have a series of cascading drop downs that are populated with a database. I'm trying to pull the data from a row in my database once the final item in the series is selected. I gave the row a custom attribute, but can't seem to get the data from it. Here is a simple example of what I want to accomplish.
http://jsfiddle.net/WsrBX/
HTML
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select>
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div><!--value should appear here upon selection-->
</body>
JS
$('option[data-pick]').on('keyup change', function(){
var idString = $(this).attr('option[data-pick]');
$('#yup').text(idString);
});
HTML:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select id="sel">
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div>
<!--value should appear here upon selection-->
</body>
JS:
$('#sel').on('keyup change', function () {
var idString = $('option:selected', this).attr('data-pick');
$('#yup').text(idString);
});
Working Demo
http://jsfiddle.net/WsrBX/1/
$('select').on('change', function(){
var idString = $(this).find("option:selected").attr('data-pick');
$('#yup').text(idString);
});
Several tips:
The change event only happens on <select>, and you cannot capture it on <option>.
The keyup event literally means keys of the keyboard, which may not be what you want.
Proper solution should be listening for change on <select>, and find the corresponding <option> using selectedIndex of <select> DOM element. Example below:
$('select').on('change', function(){
var idString = this.options[this.selectedIndex].getAttribute('data-pick');
$('#yup').text(idString);
});
Related
I am building a filtering tool using a select element. When you choose something from the drop down, it should filter the divs below to show only the div for that item.
I am targeting the divs using the select value which is also the class of the div the item is in. So for example, if you choose shirts in the drop down the value would be item-shirts and a div below would have a class of item-shirts.
I have figured out how to hide everything that doesn't have the class of the selected item when something is selected. But I can't figure out how to unhide everything when something else is selected. Any help would be greatly appreciated!
Here is my HTML
<select>
<option value="item-shirts">Shirts</option>
<option value="item-shoes">Shoes</option>
<option value="item-shoes">Pants</option>
</select>
<div class="item-section item-shirt></div>
<div class="item-section item-shoes></div>
<div class="item-section item-pants></div>
Here is my jQuery
$('select').on("change", function() {
var value = $('select').val();
if($('.item-section').hasClass(value)) {
$('.item-section.'+value).siblings().hide();
} else {
$('.item-section.'+value).siblings().show();
}
This is similar to adding an active class to a list/group of elements. Typically what you do is loop through all the elements removing the active class (even though it's only applied to one element), then add the active class to the specific element. In your case you might want to hide all DIVs, then show the specific DIV.
var $sections = $( '.item-section' );
$('select').on( 'change', function ( e ) {
$sections.hide();
$( '.' + this.value ).show();
} );
.item-section {
margin: 2rem 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="item-shirts">Shirts</option>
<option value="item-shoes">Shoes</option>
<option value="item-pants">Pants</option>
</select>
<div class="item-section item-shirts">Shirt</div>
<div class="item-section item-shoes">Shoes</div>
<div class="item-section item-pants">Pants</div>
Note: You had a few errors in your markup that I changed to make everything work. i.e. Duplicate values for your <option> tags and some missing quotes.
I've done a couple performance improvements too.
You also don't need $( 'select' ).val() inside of your event handler. The context of the handler is the <select> element so you can use the this.value instead and skip jQuery querying the DOM to do the same.
I've also cached the .item-section elements so you're not querying the DOM over and over again on each change of the select.
There was no need to test for hasClass(). All you need to do is get the value from the selected option and show the <div> having that class. I added an extra empty option so that when you select it, it will show all <div>s.
$('select').on("change", function() {
var value = $('select').val();
if (value) {
$(".item-section").hide();
$("." + value).show();
} else {
$(".item-section").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""></option>
<option value="item-shirt">Shirts</option>
<option value="item-shoes">Shoes</option>
<option value="item-shoes">Pants</option>
</select>
<div class="item-section item-shirt">Shirts</div>
<div class="item-section item-shoes">Shoes</div>
<div class="item-section item-pants">Pants</div>
I have a selection menu (drop down list).
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
& the following div which located in somewhere in my page.
<div id="somediv">This is a string.</div>
I want to display the above div upon selecting the second item of the menu (id="two").
I have 2 questions: (1) What is the best way to keep this div hidden by default? I will just add display:none; to its styling, but maybe there is a better solution? (2) How can I make the div show up when the option of id="two" is selected? Any answer would be greatly appreciated.
So I wrote a simple jquery script that does what you described. Let me know if it fixes your problem. You can also do this with javascript, but I think jquery works for this just fine.
http://codepen.io/Francisco104/pen/vEPRgp
$('select').change(function(){
decide($(this));
});
var decide = function (elem) {
var touch = elem;
if (touch.val() === 'anything') {
return $('#somediv').css('display', 'block');
}
};
For hiding it by default, using style="display: none"is the easiest. You could do it using jquery $('div#somediv').hide(); but I don't see any benefit to that other than you possibly wanting to keep the show/hide logic together.
Here are two simple solutions using a change() event.
If div#somediv should be shown permanently when option#two has been selected:
$("select").change(function() {
if ($(this).val() == 'anything') $('div#somediv').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
If div#somediv should be shown while option#two is selected and disappear if the user selects another option:
$("select").change(function() {
$('div#somediv').toggle($(this).val() == 'anything');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
You should probably give an id to the select as well, to make the jQuery selector less brittle.
So, I'd have a class for the div, let's say, is-hidden and my CSS will have .is-hidden { display: none; }. Then, do the following.
HTML:
<div id="somediv" class="is-hidden">This is a string.</div>
JS:
$div = $("#somediv");
$("select").on("change", function() {
$div.is(".is-hidden") || $div.addClass("is-hidden");
//Option 1
if ($(this).find(":selected")[0].id === "two") {
$div.removeClass("is-hidden");
}
//Option 2 (same as above, but a bit shorter)
$(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden");
});
Here is what you can do:
in your html file:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
You'll need to import the JQuery library (which I show you there right above the <select> element) so that you can execute your script.
In your css file:
#somediv {
display: none;
}
and finally here is the script that will show the dive when "plane" is selected
$('select').change(function(){
$('#somediv').css('display','block');
});
Take a look at this JSFIDDLE I made for you.
1) You can hide the div initially giving the css property display:none; or by setting its display property using javascript which will run in initial load.
2) You can listen to the onchange event of the selectfield and check if value is 'anything' then show the div by changing its display style property to block and hidden in other cases.
document.getElementById("somediv").style.display='none';
var showHideDiv=function(selectField){
var divElement=document.getElementById("somediv");
if (selectField.value=='anything')
divElement.style.display='block';
else
divElement.style.display='none';
}
<select onchange='showHideDiv(this)'>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv">This is a string.</div>
The simplest way to hide within HTML
<div hidden>content</div>
To display an hidden div
$(document).ready(function(){
$("select").change(function () {
$( "select option:selected").each(function(){
if($(this).attr("value")=="anything"){
$("#somediv").show();
}
});.
});
Display none works.
Have you tried keying into the onchange event? http://www.w3schools.com/jsref/event_onchange.asp?
I am new in JavaScript and Jquery and I am facing problem while creating a code for multiple drop-down with next and previous option , but I don't want to write twice same code for next and previous. I just wanted to use same code dynamically. I have tried but did not got any answer. Plzz suggest ....
<div class="filter-category">
<div class="floor-dropdown">
<span class="prev">Prev</span>
<select class="roof-filter">
<option value="1" selected>All types</option>
<option value="2">Type1</option>
<option value="3">Type 2</option>
</select>
<span class="next">Next</span>
</div>
<div class="floor-dropdown">
<span class="prev">Prev</span>
<select class="roof-filter">
<option>011</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<span class="next">Next</span>
</div>
</div>
jQuery(".roof-prev").click(function () {
jQuery('.roof-filter option:selected').prev().attr('selected', 'selected');
});
jQuery(".roof-next").click(function () {
jQuery('.roof-filter option:selected').next().attr('selected', 'selected');
});
Please don't write this code with different class name for second one, I want to use this code without writing again.
Thanks in advance.
You can use this as a reference to the element which was clicked. From that you can find the select it relates to by finding the closest common parent. Try this:
jQuery(function($) {
$(".prev").click(function () {
$(this).closest('.floor-dropdown').find('option:selected').prev().attr('selected', 'selected');
});
$(".next").click(function () {
$(this).closest('.floor-dropdown').find('option:selected').next().attr('selected', 'selected');
});
});
Example fiddle
I’m looking for some direction for my problem.
I’ve HTML divs and I want to replicate it when user clicks on span with id plus-1.
This is my html
<div id = “tab”>
<div class="row">
<div>
<select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
<option value="1">Project Presentation</option>
<option selected="selected" value="4">Project Root</option>
</select>
</div>
<div>
<div>
<input type="text" required="required" id="ProjectsFolder0Linux" value="xyz" name="data[ProjectsFolder][0][linux]">
</div>
</div>
<div id="plus-1" >
<span>
Click here
</span>
</div>
</div>
</div>
Jquery
$(document).on('click', '#plus-1' , function() {
var html = "<div class=\"row\" >"
???
+ "</div>";
$('#tab').append(html);
});
It is appending above html defined in jquery , but I don’t know how to append entire HTML efficiently as required above on each click.
Demo FIDDLE
Jquery
$(document).on('click', '#plus-1' , function() {
var html = $(this).parent().clone();
html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
$('#tab').append(html);
});
Made a jsfiddle for you - http://jsfiddle.net/23GCn/. You also have an error in your html, you need to use correct parenthesis on <div id="tab">
jQuery(function($){
var count = 1;
$(document).on("click", "[id^='plus']", function(){
newBlock = $(this).parents(".row").clone();
count += 1;
// change id of Plus button
newBlock.find("[id^='plus']").attr("id", "plus-"+count);
// Change id and name of select box
newBlock.find("select")
.attr("id", "ProjectsFolder"+count+"FolderId")
.attr("name", "data[ProjectsFolder]["+count+"][folder_id]");
// Same for input
newBlock.find("input[type='text']")
.attr("id", "ProjectsFolder"+count+"Linux")
.attr("name", "data[ProjectsFolder]["+count+"][linux]");
// append new element to your tab
$("#tab").append(newBlock);
});
});
Note that [id^='plus'] type selectors are very inefficient, means, slow. Consider using classes instead of ids, this way you avoid all of the code required to change ids, since you can't have elements with same id on your page obviously.
I have a problem with Chrome. I have a drop-down list. Except for Chrome, it works well. However with chrome it adds an empty element at first.
HTML Part:
<head>
<script type="text/javascript">
$(document).ready(function() {
townDistrictObject.bind({cityId:1});
});
</script>
</head>
<body>
<div class="left marginleft15">
<p>Town</p>
<p>
<select name="town1" id="townId" style="width: 152px;">
<option selected="selected" value="999999999">Whole Istanbul</option>
<option value="999999998">Anatolian Part</option>
</select>
</p>
</div>
<div class="left marginleft15">
<p>District</p>
<p>
<select id="districtId" name="districtid1" style="width: 174px;" >
<option selected="selected" value="0">Whole Districts</option>
</select>
</p>
</div>
</body>
There is something like that at script side:
var townDistrictObject = {
defaults : {
cityId :1,
townElementId : "townId",
districtElementId : "districtId",
allDistricts: true
},
bind : function(options) {
$.extend(this.defaults, options);
var that = this;
var opts = this.defaults;
var townElement = $('#' + opts.townElementId);
townElement.val(0);
}
};
Explanation of problem:
Firstly, there is an empty element at top of list.(It shouldn't be!)
Secondly, I will click one of them.("Whole Istanbul" for my example.)
Lastly, I check the list and that element at top disappears. Everything is OK after that time.
PS: I checked the code and I think that the problem is related to script side. Thanks for your help.
Could it be that you are doing:
townElement.val(0);
You are setting the dropdown value to zero, when there is no option with this value. Instead of zero, should you be using the value from the defaults?
The problem is setting with wrong id at this line:
townElement.val(0);
The answer with Jquery replacing it with:
townElement.get(0).selectedIndex = 0;