I have a question about jQuery. Let's say I have a dropdown list:
<select id="Positions" name="PositionType">
<option value="Manager">Manager</option>
<option value="Janitor">Janitor</option>
<option value="Cook">Cook</option>
<option value="Cashier">Cashier</option>
<option value="Other">Other</option>
</select>
How could I display an alert box when "other" is selected? So far this does not work:
<script type="text/javascript">
$(document).ready(function(){
$("#position").change(function(){
if($("#position option:selected").val() == "other"){
alert("hello world");
}
else {
}
});
});
</script>
Two things. First, as others have mentioned, "other" needs to be uppercase as string comparison is case sensitive. Second, you could retrieve the value of a select much easier:
<script type="text/javascript">
$(document).ready(function(){
$("#position").change(function(){
if($(this).val() == "Other"){
alert("hello world");
}
else {
}
});
});
</script>
A select element's value is equal to the value of it's selected option :-)
In your script, try "Other" with capital-O.
Related
I have a simple selection dropdown that looks like this:
Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
and a javascript that will pop up a confirmation box only if the user chooses OFF.
<script>
function myfunction(){
if (this.value === '0'){
confirm("Are you sure you want to turn off?");
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>
Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.
this way
ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);
document.getElementById('criteriaon').addEventListener('change', myfunction);
function myfunction() {
if (this.value === '0') {
if (!confirm("Are you sure you want to turn off?") ) {
this.value = '1'
}
}
}
Criteria:
<select name="criteriaon" id="criteriaon" >
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
You can simply set the value of select to 1 by doing this.
this.value = '1';
function myfunction(){
if (this.value === '0'){
const result = confirm("Are you sure you want to turn off?");
if (!result) {
this.value = '1';
}
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
I am trying to get option value of an already selected option in the select choice list. How can I make it possible. Here is my code snippet
$(document).ready(function(){
$("#getCusineType").bind('click', function() {
alert($(this).find('option:selected').val());
});
$("#getCusineType").bind('focusout', function() {
alert($(this).find('option:selected').val());
});
function getCusineType(){
var getCusineType = $('#getCusineType').val();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="getCusineType" onchange="getCusineType()">
<option value="1">Indian</option>
<option value="2">American</option>
<option value="3">Italian</option>
<option value="4">General</option>
</select>
If you want to get selected option value:
var value=$("#getCusineType").val();
or text
var text=$("#getCusineType option:selected").text();
If you want to get the selected value after change event, you should bind a change event handler.
$("#getCusineType").change(function() {
alert($(this).val());
})
console.log("Value is: "+$('#getCusineType').val());
console.log("Text is: "+$("#getCusineType option:selected").text());
$("select").click(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="getCusineType">
<option value="1">Indian</option>
<option value="2">American</option>
<option value="3">Italian</option>
<option value="4">General</option>
</select>
simply way to trigger the on change event
$(function(){
$("#getCusineType").on('change', function(){
alert($(this).val());
}).trigger('change');
});
// In jquery
$('.check').val('two').trigger('change');
// and html is
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
http://jsfiddle.net/v7QWd/353/
I need trigger the event using my text value i.e. "First" in jquery. Any solution of it? Here I have used .val('two') instead I wish to use "First"..
I think what you are trying to do is to select the option by its text, if so you can use :contains() - but it can give expected matches since it will use partial matches
So try
$(function() {
$('.check').change(function() {
var data = $(this).val();
snippet.log('data:' + data)
//if you want the selected text
var text = $(this).find('option:selected').text();
snippet.log('text:' + text)
});
$('.check option').filter(function() {
return $(this).text() == 'Second'
}).prop('selected', true)
$('.check').trigger('change');
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
$(function () {
//change to two ? how?
$('.check').change(function () {
var data = $(this).val();
alert(data);
});
if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
Use .text() to get the selected option text and .change() to trigger initially on load
$('.check').change(function(){
var data= $(this).find("option:selected").text();
if(data == 'First'){
// your logic
}
}).change();
Fiddle
I have the following code that does not seem to work:
$('.chosen-select').on('change', function() {
if ('.chosen-select'.value == '1') {
$("#tips").html("the color that you want to add.");
} else if ('.chosen-select'.value == '2') {
$("#tips").html("the text that you want to add.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>
My web browser console is not giving me any error. The code is suppose to change the html of the div based on changing the select option value.
This '.chosen-select'.value won't work as it's neither a valid jQuery expression nor JavaScript. Instead use $('.chosen-select').val(), this.value or $(this).val().
jsFiddle example
Use if($(this).val() == '1') { not as if('.chosen-select'.value == '1')
$(function() {
$('.chosen-select').on('change', function() {
if($(this).val() == '1') {$("#tips").html( "the color that you want to add.");}
else if($(this).val() == '2') {$("#tips").html( "the text that you want to add.");}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>
The below expression doesn't yield the results you want:
'.chosen-select'.value
It attempts to access the value property of a String object, which is undefined, because strings don't have such properties.
Within the change event handler function, you can make good use of the fact that this references the <select> element:
var selectedValue = this.value; // get value from select element
Alternatively, use jQuery's .val() function to get the value:
var selectedValue = $(this).val();
I have a validator function looping through to check and see if all inputs have been filled out, but I also need to check if the dropdown's have been selected as well. I would like to write that into the same function.
function validateSave (){
// reset status
var good = true
$('.errormessage-left').removeClass('active-left')
$('input').removeClass("warning")
$('input').each(function(){
if ($(this).val() == "") {
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
})
console.log(good)
return good
}
What's the best way to go about this?
You can use val() on a dropdown (<select> element) just like an input element, so just include it in your selector
$('input, select').each(function(){
You can do this :
Assuming the first element is :"please choose..."
if ($(".myDDL").get(0).selectedIndex>0)...
or
if ($(".myDDL").prop('selectedIndex')>0)...
Try this:
$('input').each(function(){
if($(this).prop('selected') == true){
// selected item
}
});
Assuming your HTML looks something like this:
<input type="text" name="whatever">
<select>
<option value="">Choose One...</option>
<option value="choice1">Choice 1</option>
<option value="choice2">Choice 2</option>
<option value="choice3">Choice 3</option>
</select>
Then your jQuery can figure it out like this
$('input, select').each(function(){
if($(this).val() == ''){
alert('Cannot be blank!');
}
else{
//proceed
}
}
you should be able to add this to your loop:
if ($(this).prop('type')=='select-one'){
if ($(this).prop('selectedIndex')==0){
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
}