I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});
Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.
You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO
Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});
one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.
You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();
Related
I'd appreciate some help regarding this Fiddle. A user would be presented with two unordered lists. By clicking on an option in one of the lists, a table will be shown and all else hidden.
My problem is that with my current setup, I can't get all the table combinations to work properly. I can use $(this).attr("value") on click to get the selected value for a given list, but using $("#select2 li").attr("value") for instance will always return value "c", even if a user had selected "option d" previously. This results in options like table "bd" not being possible.
Here's the JavaScript:
$(document).ready(function () {
$('.select-menu a').click(function () {
var text = $(this).text();
$(this).parent().parent().siblings().html(text + ' <span class="caret"></span>');
$(this).parent().siblings().removeClass('active');
$(this).parent().addClass('active');
});
$("#ac").show();
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});
});
I wanted to allow for the user to have to provide only one input for either list to see a different table, instead of requiring a selection in both lists.
Can anyone help me with this please or suggest a better approach? Thanks!
you fetching value with only #select2 li instead of #select2 li.active
try to replace your code with this block even i have updated in jsfiddle.
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li.active").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li.active").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});
This function is set up so it simply finds the -a's- within the class of menu-option-set, and says, upon click, add the class "selected" and remove the class "selected" from all others within that list.
What I want to do is simply have it so if you click the item that already has the class of "selected" then it removes the class of "selected". I know it shouldn't be "return false;" I just have that as a placeholder because I can't figure out the proper coding.
Thanks guys! :)
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// Remove Class if already selected --> this is the part that I need help with
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
$('.menu-option-set a').click(function()
{
// if clicked item is selected then deselect it
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
// otherwise deselect all and select just this one
else
{
$('.menu-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
You should just be able to use $().removeClass('selected') i.e.
if ( $this.hasClass('selected') ) {
$this.removeClass('selected');
}
However, you are also adding the class again later so this should not really be necessary.
You could inline this by selecting all the .selected elements, removing this and removing the class.
$this
.parents('.menu-option-set')
.find('.selected')
.not(this)
.removeClass('selected');
$(this).addClass('selected');
Alternatively, use the toggleClass() method as follows:
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').not(this).removeClass('selected');
$this.toggleClass('selected');
});
EDIT: Added the .not(this) to exclude the clicked <li> from having the class removed before it should.
If you want to be concise:
$('.menu-option-set a').click(function() {
$(this).toggleClass('selected').siblings().removeClass('selected');
});
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});
I am using jquery quicksand and i wanted to know how i could return to that page with the list presorted. I am not very knowledgable in javascript so any help would be greatly appreciated.
EDIT
found this solution for a similar filter http://savethefix.wordpress.com/2011/12/06/filterable-portfolio-with-jquery-with-external-link-support/
but cant see how to tie this in with quicksand
figured it out if anyone is interested.
$(document).ready(function() {
// get the action filter option item on page load
var $filterType = $('#filterOptions li.active a').attr('class');
// get and assign the ourHolder element to the
// $holder varible for use later
var $holder = $('ul.ourHolder');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
var $button = $('#filterOptions li');
var $all = $('ul.ourHolder li').data('type') === 'all';
if (window.location.hash) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filtered = window.location.hash.replace('#', '');
$('a[class=' + $filtered + ']').parent().addClass('active');
var $filteredData = $data.find('li[data-type~=' + $filtered + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
}
// attempt to call Quicksand when a filter option
// item is clicked
// Main Filter
$('#filterOptions li a').on('click', function(e) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
var $filterData = $data.find('li[data-type~=' + $filterType + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filterData, {
duration: 800,
easing: 'easeInOutQuad'
});
});
//Main Containers
$('ul.ourHolder').on('click', 'li.all', function(e) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $ba = $('#filterOptions li a');
var $filteringType = $(this).attr('id');
var $navFilter = $ba.attr('class');
var $filteringData = $data.find('li[data-type=' + $filteringType + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filteringData, {
duration: 800,
easing: 'easeInOutQuad'
});
});
});
I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});
Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});
Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code