I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
Related
I have a select2 element and an input element as follows...
Label: <input class="default-ele" type="text"/>
<select class="some-select">
<option>-- None --</option>
</select>
and some JS/JQuery as follows...
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('change', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});
That all works except that if you enter a value into the input then click the select with the cursor still in the input, the value is not there until you move focus away from the select and back to it. Is there a timeout or some other way to get the value to display when immediately clicking on the select after the input changes?
TIA
I would suggest to use keypress event to trigger 'select' refresh functionality.
Something like below.
This should update trigger callback on input as soon as you lift key.
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('keyup', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});
I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/
I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.
Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/
You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.
This is a followup question. I've been trying to grab the selected text from multiple iframe using rangy. The code seems to be working for 1st iframe .
i want to grab elements using the same button., for div it works k. but in iframe we need to specify the iframe and when i tried the array of iframes ., that is not working
Use jQuery $.each:
$(function () {
$('button').click(function () {
$.each(iframe, function(idx, vl) {
var selection = rangy.getSelection(iframe[idx]);
alert(selection);
});
});
});
Demo: http://jsfiddle.net/cWV3G/
Here is the Working Fiddle
Try getting the the Rangy iframe selection object and access the FocusNode property and get the selected text from that iframe like this:
JS:
$(function () {
$('button').click(function () {
iframe.each(function(i){
if(rangy.getSelection(iframe[i]).focusNode!=null)
{
var selection = rangy.getSelection(iframe[i]).focusNode.data;
alert("Iframe - "+(i+1)+ " selected text : '" +selection+"'");
}
});
});
});
I have the following jQuery:
<script>
$(document).ready(function () {
$(".search_type").hide();
$("#select_search").change(function () {
$('#' + $(this).val()).toggle();
});
});
</script>
<select id="select_search">
<option value="1">
<option value="2">
<option value="3">
</select>
<div id="1" class="search_type">Some Text</div>
<div id="2" class="search_type">Some Text</div>
<div id="3"class="search_type">Some Text</div>
enter code here
Currently I have it display the corresponding div based on select box change, however, this does not remove it if the select box is changed again.
Is there an if(($this):not.val()).....Something something hide? Sorry, I'm new to JS / jQuery, and am really struggling here.
You need to hide the previously displayed element, one easy way to sue hide all the search_type elements again the the change handler then show current element
jQuery(function ($) {
var $stypes = $(".search_type").hide();
$("#select_search").change(function () {
$stypes.hide();
$('#' + $(this).val()).show();
}).change();
});
Demo: Fiddle
I'm a little unclear on your question, but as best I can tell you want to display one DIV that corresponds to the user's choice from a select box. If the user selects a differnt option, you want to hide the previously show box, correct?
I think this sample will help you: http://jsfiddle.net/HaMQr/
There is a $.not( object ) method which will take action on any matching object which is NOT the one you provide. See the code below:
$("#select_search").change(function () {
var activeBox = $('#' + $(this).val());
activeBox.show();
$('div').not(activeBox).hide();
});
no but you can do it like so:
$(document).ready(function () {
$(".search_type").hide();
$("#select_search").change(function() {
$(".search_type").hide();
$("#" + $(this).val()).show();
});
});
this will hide all elements with the class search_type then show the selection.
you can also make a placeholder variable, like so:
var showing;
$(document).ready(function () {
$(".search_type").hide();
$("#select_search").change(function() {
if (showing) {showing.hide();}
showing = $("#" + $(this).val());
showing.show();
});
});
Just wondering if there is any way to check if the value of a select box drop-down matches the original value at the time of page load (when the value was set using selected = "yes") ?
I guess I could use PHP to create the original values as JavaScript variables and check against them, but there are a few select boxes and I'm trying to keep the code as concise as possible!
That's not too hard at all. This will keep track of the value for each select on the page:
$(document).ready(function() {
$("select").each(function() {
var originalValue = $(this).val();
$(this).change(function() {
if ($(this).val() != originalValue)
$(this).addClass('value-has-changed-since-page-loaded');
else
$(this).removeClass('value-has-changed-since-page-loaded');
});
});
});
This will apply a new class value-has-changed-since-page-loaded (which presumably you'd rename to something more relevant) to any select box whose value is different than it was when the page loaded.
You can exploit that class whenever it is you're interested in seeing that the value has changed.
$(document).ready(function() {
var initialSelectValue = $('#yourselect').val();
// call this function when you want to check the value
// returns true if value match, false otherwise
function checkSelectValue() {
return $('#yourselect').val() === initialSelectValue;
}
});
PS. You should use selected="selected" not selected="yes".
On page load, create an array with the initial value of each select box indexed by name:
var select_values = [];
$(document).ready(function() {
$("select").each(function() {
select_values[$(this).attr('name')] = $(this).val();
});
});
later when you need to check if a value has changed:
function has_select_changed(name) {
return $("select[name="+name+"]").val() != select_values[name];
}
First, a snippet:
$('select').each(
function(){
if( this.options[ this.selectedIndex ].getAttribute('selected') === null ){
alert( this.name +' has changed!')
}
});
Now the explanation:
Assuming selectElement is a reference to a <select /> elementYou can check which option is selected using
selectElement.selectedIndex
To get the <option /> element which is currently selected, use
selectElement.options[ selectElement.selectedIndex ]
Now when you know which option element is selected you can find out if this element has the selected='selected' attribute (as in the source code, it doesn't change - this is not the same as .selected propery of a DOM node, which is true for the currently selected option element and changes when the selection is changed)