I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());
Related
I'm creating a form. I have two fields, 1. default value field and 2. preview field. Both are multiselect fields. The user will add the options to the multiselect manually. Whenever the user chooses an option in the default value, the same value should be shown as selected in the preview field. When the user removes one option, the same option should be unselected. This is how I've written the onchange event for this multiselect:
$("#MultiSelect_DefaultValues").change(function() {
alert($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
I get the correct value in the alert. But, in the preview field, there is no reaction. All the options available in the default value field are available in the preview field too. But, the options selected in the default value field is not selected in the preview field. What's wrong with this? What should I change, so that the changes in the default field reflects in the preview field too?
You said you are using select2 so execute like this:
$("#MultiSelect_DefaultValues").change(function () {
alert($(this).val());
var prevSelect = $("#MultiSelect_Preview").select2();
prevSelect.val($(this).val()).trigger('change');
});
The values on the option tags need to match for this, if I'm understanding correctly what you're trying to achieve that is.
e.g.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
You can provide multiple replacements by sending an int array to the select method.
$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
you can use this code
<script>
$("#MultiSelect_DefaultValues").change(function () {
$('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I am attempting to trigger a change of CSS for some objects further down in my code when one of the option tags is selected. I did not include them here as they are not pertinent to the issue at hand which is the jQuery. I am at a loss at this point. Here is what I have so far...is it even possible?
<script>
$(document).ready(function(){
$("#feed-filter option:selected").change(function () {
$("#CA, #GA, #GD").animate({height: '0px'});
})
})
</script>
<div class="feed-filter">
<select id="feed-filter" name="feed-filter">
<option id="option-ALL" value="ALL" selected>ALL</option>
<option id="option-CA" value="A">A</option>
<option id="option-DAD" value="B">B</option>
<option id="option-GA" value="C">C</option>
<option id="option-GD" value="D">D</option>
</select>
</div>
firstly you aren't triggering a CSS animation, that is a jQuery animation. Secondly, the ID's you are animating don't exist in the HTML, and thirdly, your selector/listener is invalid, you need to listen to $('select').change();
If you need to then access the value of the selected option you can do so by doing something like this
$('select').change(function() {
var val = $(this).val();
});
I am trying to display two tables using dropdown box choices.
I'm using this JS code. Here's FIDDLE
function change_tbl(dhi)
{
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
}
but it isn't working. How?
I need first table to display on load. (Means first table should be default choice.)
Any solutions?
You need to call the function in onchange() like
<select onchange="change_tbl(this.value)">
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
Demo: Fiddle
Also in the fiddle there are few other problems like
jQuery was not included
since change_tbl is used in an inline handler you need to declare it in the global scope - select No Wrap Head/Body in the second dropdown in the left panel
Use a jQuery event handler like
<select id="table-select">
<option value="">select table</option>
<option value="tb1" selected>table 1</option>
<option value="tb2">table 2</option>
</select>
then use a .change() handler to register the change event handler
jQuery(function () {
$('#table-select').change(function () {
$('#tbl_div > div').css('display', 'none');
if (this.value) {
$('#' + this.value).css('display', 'block');
}
}).change(); //this is used to trigger a manual change handler initially so that the state is properly set on page load
})
Demo: Fiddle
Also read: Document Ready, trigger handler, change() handler, id-selector
Demo : http://jsfiddle.net/4K9hM/3/
Html:
<select id="tt" >
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
<div id="tbl_div">
<div id="tb1">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
<div id="tb2">
<table border="1">
<tr><td>2</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
</table>
</div>
</div>
Js:
$(document).ready(function(){
$("#tt").change( function ()
{
dhi = $("#tt").val();
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
});
});
i am playing some show/hide function using my select drop down. Here is the html for select,
<select id="sel1" size="1" name="">
<option selected="selected" value="0">Select Here</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Here is my jquery,
$(document).ready(function(){
$("#sel1").change(fun);
});
function fun(){
var selected = $("#sel1 option:selected");
if(selected.val() == 1) {
$("#div1").slideDown("slow");
$('#div2').slideUp("slow");
} else if(selected.val() == 2) {
$("#div1").slideUp("slow");
$('#div2').slideDown("slow");
} else {
$("#div1").slideUp("slow");
$('#div2').slideUp("slow");
}
};
But after the value sent to the server and return back, I want to retain the div1 or div2 based on the value select in the dropdown. But as of now, both the div are not displaying because of display=none at initial level. Any way to retain this?
If your HTML is generated using a server-side language, your best option would be to only add the display: none CSS property to them when appropriate. Alternatively, you could just trigger the change event handler when the DOM is ready, using:
$(document).ready(function(){
$("#sel1").change(fun).trigger('change');
});