I have this Show/Hide select box (JS Fiddle) that gets a classname from a selected option and hides a corresponding unordered list item. I am at a loss to use replace() to replace the text Hide with Show or vice versa when an option is clicked.(e.g Show Month should become Hide Month on click.)
I also want to change all the options back to Hide when I click the Show All option.
When I used
findoption.replace('Hide','Show'); I got this Uncaught TypeError: undefined is not a function error. Can anyone show me how to do that? Any help would be appreciated.
JS Code:
$(document).ready(function(){
$(".showhidelist").change(function() {
$this = $(this);
var findoption = $this.find('option:selected');
var selected = findoption.data('hide');
var show_hide_li = $("."+selected);
if (show_hide_li.css("display") == "none") {
show_hide_li.show();
/* Want to Replace the text Hide with Show */
}
else if (show_hide_li.is(':visible')){
show_hide_li.hide();
/* Want to Replace the text Show with Hide */
}
else if (selected == "Reset") {
$('li').show();
/* Want to Replace the text Show with Hide if it's true */
}
});
});
HTML
<select class="showhidelist">
<option data-hide="Reset">Show All</option>
<option data-hide="year">Hide Year</option>
<option data-hide="month">Hide Month</option>
<option data-hide="day">Hide Day</option>
</select>
<ul id="list">
<li class="year">2004</li>
<li class="month">Feb</li>
<li class="day">17</li>
<ul>
findoption is returns a jquery array, so you would need to access the first element there. I think the following will achieve what you're looking for (as far as the selected element goes).
findoption[0].innerHTML = findoption[0].innerHTML.replace('Show','Hide');
I'm not sure what you're really doing - this gets a little quirky, since you have the show/hide all and you'll have to go through the whole list to update them when you do. Also - you aren't getting a selected event when you re-select what's already selected.
UPDATE: this includes how to update all items in the list using each()
jsfiddle: http://jsfiddle.net/hk4wg/15/
You are not getting the text() into the replace, and you could use the function that .text() has to replace the text.
findoption.text(function(_,text){ return text.replace('Hide', 'Show')});
Change the word 'Hide' or 'Show' depend on what you want.
Update:
I read in caspian comment, that you problem now is that you could not re-click an option clicked, try restarting the select to first option like:
$(".showhidelist").prop('selectedIndex',0);
Related
If I have only one option in my dropdownlist, I need to select this option as default. How can I do this using jQuery?
I think you are new to SO, the usual procedure here is to provide some code of your own efforts on the matter before posting. That said, this is simple JQuery:
Edit to fit new specifications:
if($("#select_id option").length == 2){ //if there are exactly 2 options in the select element
$("#select_id option:nth(1)").attr("selected",true); //take the second option (element 0) inside the element with id "select_id" and set the selected attribute.
} //I think we do not need an else if any other thing will select the first option by default
Anyway, first option should be selected by default.
<select id="select_id">
<option value=1>First option is selected by default</option>
</select>
<!--adding proof that it is selected-->
<script>
$(function(){
alert($("#select_id").val()); //this will alert 1, since is the value of my first option
});
</script>
I am using some jQuery to populate various dropdowns. I was able to get the jquery to show current value as the first option.
However, I need it to not only show as the first option, but as the currently selected option so that the selection doesn't appear twice in the dropdown.
As shown in the images below, you see the current value is Target. But after clicking the dropdown button, Target is listed twice:
Here is what the current jQuery looks like:
$(function()
{
$eexist = $(this).attr('data-exist');
$('#eexist option:first').val($eexist).text($eexist);
}
Which goes into this modal form dropdown select:
<div id="editCustModal">
<form id="editCustForm" name="editCustForm">
<label for="eexist">Existing/Target</label>
<select class="form-control" id="eexist" name="eexist">
<option></option> // keeping this or not does nothing
</select>
</form>
</div>
The value and the text are the words Target and Existing.
To reiterate, if the current value is Target, then when you click on the dropdown, you should only see Target as the currently selected item AND only see it once.
If you want to select first option then below is the code:
$('select option:first-child').attr("selected", "selected");
But if you want to select the current value then below is the code:
$('#eexist option:first').val($eexist);
this should only work if $eexist exists as value in dropdown
Since you didn't provide much so it's hard to tell..At least provide a jsfiddle link when you ask a question
Do it this way...
$(document).ready(function(){
$("#myselect").change(function(){
var toR = $('<div>').append($('#myselect option:selected').clone()).html();
console.log(toR);
$("#myselect option:selected").remove();
$("#myselect").html(toR+$("#myselect").html());
});
});
Working Fiddle
I want to open a dropdown on click of a image and also display a alert message that which of the dropdown option is being clicked .
My html code is :
<div class="account_notification">
<a href="#">
<div class="notify_notification">click</div><!-- notify_notification close --></a>
</div><!-- account_notification close -->
<select class="select1" size="5" style="display:none">
<option name="test" value="" class="first">Select</option>
<option name="test" value="" class="">NOTIFICATION1</option>
<option name="test" value="" class="">NOTIFICATION2</option>
</select>
What will be javascript code to do so ?
Though i found a jquery on inernet for dropdown display but that also without showing which option is selected and also i know very little about jquery .So i want code in javascript.Please help
Jquery i found is as follow :
$('.notify_notification').click(function() {
$('.select1').toggle();
});
I got the code from answers but the problem here is suppose before click if the bar is like this:
http://postimg.org/image/n04ggm7ux/
After clicking the image the bar become :
http://postimg.org/image/4h344hl7t/
How to get it down instead of being displayed along side ?
If you want to open the dropdown, not just to unhide the select element... Well, you're in trouble, because there is no generic or simple solution for that. Consider building your custom drop-down, trying another elements (like radio buttons) or using Shadow DOM.
To show the selected option, use something like this:
alert($('.select1 option:selected').text()); //show text of selected option
alert($('.select1').val()); //show selected value
You actual code is showing/hide the select; if you want to open the select programmatically is not possible even if you trigger a click the drop down list won't open like if the user clicked on it. An alternative is to use a custom select display plugin (like chosen).
To display the select value on option click use the change event:
$('.select1').change(function(){
alert($(this).val());
alert($(this).find('option:selected').text())
});
Demo: http://jsfiddle.net/IrvinDominin/YdJzP/
If you want only JavaScript solution.
You can toggle your combo with this:
function toggle(){
var elem = document.getElementById("myselect");
if(elem.style.display == "none")
elem.style.display = "block";
else
elem.style.display = "none";
};
And after adding onchange="selectHandler(this)" to your select on html, you can get selected value with:
function selectHandler(x) {
if(x.value!="")
alert("Selected: "+x.value);
toggle();
}
Here is a only example: JSFIDDLE
I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example, but it doesn't work when simply adding
$(".selectAge").bind('change', function (e) {
var cols=[]
cols[3] = $(this).val()
$('table').trigger('search', [cols]);
});
to my example code. Would you please tell me how to get the select box to work?
My example code is a copy from the official example.
It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:
<select class="selectAge tablesorter-filter" data-column="3">
<option class="reset" value="">Filter by age</option>
<option>>=25</option>
<option><=25</option>
</select>
Here is an updated demo (all I changed was the select and added the blue theme css).
Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:
$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );
I have hidden div tags in my html which i want to display them when a user select some category, but i have more hidden divs becuase its a big site. And i should display them when a user select certain category.
My problem here is that i'm new to jQuery and i really dont know if this is the right way but i know that i have problem doing like this way in this fiddle :
Here is a fiddle to check
There is no problem when i first select the first category but then when i select some other and back again to the first problem dont work properly. I dont understand where can be the problem.
Or should i use this all slideDown in one category on change function ?
If someone can help me here in this situations and give me a very proper way of using slideDown like in this situations.
Thanks.
i would do it this way
$(document).ready(function () {
$('#dropdown').on('change', function () {
$('.common-class-for-all-hidden-divs').hide();
var selection = $(this).val();
$('#category_show_'+selection).show('slow');
});
});
one of the hidden divs example
<div id="category_show_3" class="common-class-for-all-hidden-divs" >
<select name="category_show_3">
<option value="">category_show_3</option>
<option value="1">category_show_3</option>
<option value="2">category_show_3</option>
<option value="3">category_show_3</option>
<option value="4">category_show_3</option>
<option value="5">category_show_3</option>
</select>
</div>
css part --
.common-class-for-all-hidden-divs{
display:none;
}