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();
Related
// 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 HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..
Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/
You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..
i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/
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');
}
}
How do you take a value of an option in a select form and use it for a if else statement?
for example if apple is selected as an option then write to the document how to make applesauce but orange is selected then write how to make orange?
so far I have a basic form and select options and I know how to do the document.write but I dont know how to use a select form with if else
thanks for the help
First, make sure you have an id on your <select> allowing you to reference it from Javascript:
<select id="fruits">...</select>
Now, you can use the options and selectedIndex fields on the Javascript representation of your <select> to access the current selected value:
var fruits = document.getElementById("fruits");
var selection = fruits.options[fruits.selectedIndex].value;
if (selection == "apple") {
alert("APPLE!!!");
}
var select = document.getElementById('myList');
if (select.value === 'apple') {
/* Applesauce */
} else if (select.value === 'orange') {
/* Orange */
}
Your HTML markup
<select id="Dropdown" >
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
Your JavaScript logic
if(document.getElementById('Dropdown').options[document.getElementById('Dropdown').selectedIndex].value == "Apple") {
//write applesauce
}
else {
//everything else
}
Alternatively you can do this.
var fruitSelection = document.formName.optionName; /* if select has been given an name AND a form have been given a name */
/* or */
var fruitSelection = document.getElementById("fruitOption"); /* If <select> has been given an id */
var selectedFruit = fruitSelection.options[fruitSelection.selectedIndex].value;
if (selectedFruit == "Apple") {
document.write("This is how to make apple sauce....<br />...");
} else {
}
//HTML
<!-- For the 1st option mentioned above -->
<form name="formName">
<select name="optionName> <!-- OR -->
<select id="optionName">
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Peach">Peach</option>
</select>
</form>
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.