Here is the simple code which I am trying on js fiddle:
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
$(function () {
$(document).on('click', '.pid', function () {
alert('here');
});
});
Click on http://jsfiddle.net/QRVSw/16/
The click event applies to the whole select element, not to the individual options. Also it's better to use the change event which triggers after making a selection, in contrast to the click event, which triggers as soon as you click.
In addition, you don't need to wrap your code to prepare it for OnReady. With this on call, you bind the event to the document, which is already available, even if the select object itself isn't yet.
So, your code could be simplified (and made working) like this:
$(document).on('change', '#test', function () {
alert('here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
You could try to make use of the onchange event for select elements:
$(function () {
$(document).on('change', '#test', function () {
alert('here');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
Related
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 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());
This is my code: http://jsfiddle.net/47apf/
It should submit the form on select change but it doesnt do anything
$(function() {
$('#candidate_filter').change(function() {
this.form.submit();
});
});
Can anyone please explain why this code doesn't work?
Well, you don't need the .form in this case.
$(function() {
$('#candidate_filter').change(function() {
this.submit();
});
});
Here, this itself is the form.
Write this:
$('#candidate_filter').change(function() {
$(this).trigger('submit');
});
Updated fiddle here.
Try this
$('#candidate_filter').change(function() {
//alert("hii");
this.submit();
});
Fiddle: fiddle
You need to assign id of drop down as below:
<form id="candidate_filter">
<select name="vacancy" id="candidate_filter1">
<option value="all">Any Vacancy</option>
<option value="1">Engineering lk;lk;</option>
</select>
<select name="status" id="candidate_filter2">
<option value="all">Any Status</option>
<option value="open">Open for applications</option>
<option value="closed">Closed for applications</option>
<option value="inactive">Inactive</option>
</select>
<select name="date">
<option value="all">Any Date</option>
<option value="today">Today</option>
<option value="3">3 days</option>
<option value="7">This week</option>
</select>
<select name="consideration" id="candidate_filter3">
<option value="all">Any Consideration</option>
<option value="qualified">Qualified</option>
<option value="rejected">Rejected</option>
</select>
<input type="submit">
</form>
JS
$(function() {
$('select[id^="candidate_filter"]').change(function() {
this.form.submit();
});
});
DEMO
You have to submit the form like this: $('#candidate_filter').submit();
Here is a working JSFiddle: http://jsfiddle.net/47apf/5/
JQuery
$(function() {
$('#candidate_filter').change(function() {
alert("change event catched");
$('#candidate_filter').submit();
});
});
You can do like this in jQuery.
Put a class on your select, and bind the event onchange
$('.candidateList').on('change', function(evt){
$('#candidate_filter').submit();
});
http://jsfiddle.net/darksioul/4ygAg/2/
Try:
$(function() {
$('#candidate_filter select[name="vacancy"]').change(function() {
$('#candidate_filter').submit();
});
});
Inside jQuery selectors, the this word references to the selected element on DOM, in you original code, $('#candidate_filter') represents the FORM element. Adding a second reference you have a better approach to what you desire $('#candidate_filter select[name="vacancy"]'). And to submit the form, you need to point especifically to the FORM element.
Could someone tell me why this is not working?
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = initPage;
function initPage() {
document.getElementById("member_type_academic_4").onChange=alert("It's Working");
}
</script>
</head>
<body>
<form>
<label for="member_type_academic_4">test</label>
<select name="member_type_academic_4" id="member_type_academic_4">
<option value="0" selected>Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
</body>
</html>
It will fire the alert box when the window loads, but not when there is a change on the select box. I know it's something simple that I'm missing. Thanks!
That is because the onchange event handler is assigned the return value of the method call to alert. This ends up being undefined, however, calling alert will send the message to the screen. Instead you should use a function to assign to the event handler
function initPage() {
document.getElementById("member_type_academic_4").onchange = function(){
alert("It's Working");
};
}
Why not execute the function when there is actually a change in the select element?
<select name="member_type_academic_4" onchange="initPage()"
id="member_type_academic_4">
<option value="0" selected>Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Then change the Function to this one:
function initPage() {
alert("It's Working");
}
First: "onChange" -> "onchange"
Next, wrap the alert function in a wrapper, otherwise it will just execute as soon as it is encountered in the code.
document.getElementById("member_type_academic_4").onchange=function(){alert("It's Working")};
A jsFiddle for you
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');
});
});