jQuery On Change Method Does Not Work Out - javascript

I am new to jQuery and have added this code for changing html output based on select option like this:
$(document).ready(function () {
$('body').on('change','#theSelect', function() {
var value = $("#theSelect option:selected").val();
if(value === "98"){
$('.free').show();
$('.price-show').hide();
}else {
$('.free').hide();
$('.price-show').show();
}
});
});
And this is the html:
<select id="theSelect">
<option value="98">New York</option>
<option value="108">Los Angeles</option>
<option value="118">San Fransisco</option>
</select>
<small class="price-show">
800 $
</small>
<small class="free">
Free
</small>
But now the problem, it does not even workout.
Live Example: Here
So would you mind please tell me how to solve this and change html output when user selects different value from select option correctly?
I would really appreciate that

seems like you're not adding jquery cdn
$(document).ready(function () {
$('body').on('change','#theSelect', function() {
var value = $("#theSelect option:selected").val();
if(value === "98"){
$('.free').show();
$('.price-show').hide();
}else {
$('.free').hide();
$('.price-show').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="theSelect">
<option value="98">New York</option>
<option value="108">Los Angeles</option>
<option value="118">San Fransisco</option>
</select>
<small class="price-show">
800 $
</small>
<small class="free">
Free
</small>
you are not using jquery cdn, it must be there to make your code work

The basic problem is that you have not included the jQuery library in your code. So $ is undefined.
You will also need to trigger an initial change on the #theSelect element so that it adjusts itself according to the initial value.
$(document).ready(function() {
$('body').on('change', '#theSelect', function() {
var value = $("#theSelect option:selected").val();
if (value === "98") {
$('.free').show();
$('.price-show').hide();
} else {
$('.free').hide();
$('.price-show').show();
}
});
$('#theSelect').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="theSelect">
<option value="98">New York</option>
<option value="108">Los Angeles</option>
<option value="118">San Fransisco</option>
</select>
<small class="price-show">
800 $
</small>
<small class="free">
Free
</small>

Related

JQuery select options on change not displaying value

When I select an option in my website, it should alert the option's value, but in this situation, the value is not alerted.
However when I tried it in JSFiddle, it works.
I am using jQuery 3.4.1 with jQuery loading at head tag.
My javascript script file is located at the bottom of body tag
HTML code
<div class = 'custom-select'>
<select id = 'choice'>
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>
Javascript code
$(function() {
$('#choice').change(function() {
alert($('#choice option:selected').text());
});
});
Please advise me on what I am missing or doing wrong, thank you.
Please check if you have Jquery included in the html. I added it and it worked.
Try adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Your code works.
1. Check your console for any errors.
2. Check if it is the first script that is included.
3. Check if javascript is enabled in your browser.
Option 1 with jquery:
$(function() {
$('#choice').change(function() {
alert($('#choice option:selected').text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = 'custom-select'>
<select id = 'choice'>
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>
Option 2 without jquery:
function alert_dropdown(value){
alert(value);
}
<div class = 'custom-select'>
<select id = 'choice' onchange="alert_dropdown(this.value)">
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>
In case your content is being added dynamically you could try the following. In addition use val() to get the select box option.
$(document).on('change', '#choice', (e) => {
alert($(e.target).val());
});
If your content is not being added dynamically then simply use:
$('#choice').on('change', (e) => {
alert($(e.target).val());
});
$(document).on('change', '#choice', (e) => {
alert($(e.target).val());
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
<select id='choice'>
<option value=''></option>
<option value='one'>One</option>
<option value='two'>Two</option>
</select>
</div>
alert($("#choice > option:selected").val());
$("#choice").on("change", (e) => {
alert(($(e.target).val().length ? $(e.target).val() : "Select Something!"));
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
<select id='choice'>
<option value=''></option>
<option value='one' selected>One</option>
<option value='two'>Two</option>
</select>
</div>

Passing value between 2 dropdowns onchange. Update without click

I'm trying to build 2 separate dropdown selector with same value of options (same text)
selector 1
selector 2
<script type="text/javascript">
jQuery(function ($) {
var $set = $('#selector1, #selector2')
$set.change(function () {
$set.not(this).val(this.value)
})
})
</script>
<html>
<div style="float: right;margin-left: 10px;">
<div >
<select id="selector1" onchange=""
style="width:130px;">
<option selected diabled hidden value="">Select Volume
Type</option>
<option value="1">Auto-Weekly</option>
<option value="2">Auto-Monthly</option>
<option value="3">Custom Weekly</option>
<option value="4">Custom Monthly</option>
</select></div>
</div>
<td style="text-align: center;">
<select id="selector2" style="width:80px;">
<option selected="" diabled="" hidden="" value="0">Select Report
Period</option>
<option value="1">Auto-Weekly</option>
<option value="2">Auto-Monthly</option>
<option value="3">Custom Weekly</option>
<option value="4">Custom Monthly</option>
</select>
</td>
</html>
Problem:
Now I have used the javascript above to match the value from $set.
The issue is that I have to 'click' onto the dropdown in order to 'update'.
For example,
if i selected option value=1 in selector1, then i have to 'click' selector2 to see the updated value.
Could you please help if there are more refined solution? I am using these options differently later on, that's why I need 2 separate selectors and match them through binding.
I've tried following script, but it still required that i click to update the dropdown value.
<script type="text/javascript">
$(document).ready(function(){
$('#selector1, #selector2').on('change',function()
{
var report_answer = jQuery('#selector1').val();
var report_type = jQuery('#selector2').val();
var x= document.getElementById("selector1").selectedIndex;
var y = document.getElementById("selector2").selectedIndex;
report_type = this.report_answer;
this.selectedIndex = y;
y=report_type;
return report_type;
});
});

Change style of select box when Other select box change in html

I am trying to change the CSS property of select box when other select box is change.
When Id=project-type , is changes its value than bgt-hourly and bgt-fixed select box show show accordingly.
if hourly selected than bgt-hourly should show and when it select Fixed than bgt-fixed select options should show.
i tried many time with different codes from stack-overflow but it didn't help me well.
if any one can solve this than I appreciate his/her help.
thanks
I have following Code:
HTML:
<span class="service-tab">
<span class="sub-cat span6">
<label for="project-type">Project Type:</label>
<select class="project-type " id="project-type" >
<option value="hourly">Hourly</option>
<option value="fixed">Fixed</option>
</select>
</span>
<span class="sub-cat span6 " id="bgt-fixed">
<label for="budget">Budget:</label>
<select class="budget " id="budget" required >
<option value="250">$0 - $250</option>
<option value="750">$250 - $750</option>
<option value="5000">$750 - $5000</option>
<option value="5000">$1500 - $5000</option>
<option value="5000">$3000 - $5000</option>
<option value="10000">$5000 - $10000</option>
<option value="10001">$10000 and Above</option>
</select>
</span>
<span class="sub-cat span6" id="bgt-hourly">
<label for="budget-hourly">Budget:</label>
<select class="budget-hourly" id="budget-hourly" required>
<option value="10">$0 - $10</option>
<option value="20">$10 - $20</option>
<option value="50">$20 - $50</option>
<option value="100">$50 - $100</option>
<option value="200">$100 - $200</option>
</select>
</span>
</span>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
}
});
if($(this).val() == "hourly")
{
alert('value 1 (wich refers to Chef) got selected');
}
});
});
Error: you have placed if($(this).val() == "hourly") outside change function.
Try:
$(document).ready(function () {
$("#project-type").change(function () {
if ($('#project-type').val() == "fixed") {
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
} else if ($(this).val() == "hourly") {
alert('value 1 (wich refers to Chef) got selected');
}
});
});
DEMO
Try this:
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
$('#bgt-hourly').hide();
$('#project-time').hide();
$('#project-hours').hide();
}
else if($(this).val() == "hourly")
{
$('#bgt-hourly').show();
$('#bgt-fixed').hide();
$('#project-time').show();
$('#project-hours').show();
}
});
});
must not set class or id same for best code practises
$("#project-type").change(function(){}
this should be
$(".project-type").change(function(){}
and
<select class="project-type" id="projects" >
eliminate extra spaces
$(".project-type").change(function(){...}

JavaScript - Dropdown does not work

I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/

Javascript jQuery Hide Form Items Based on Select Item

I am trying to make a form in which when someone selects "Other" as their title, they get a box appear to input the title. The first part of my script works in order to make the div hidden to begin with but I can't quite get the second part to work in which selecting "Other" makes a text box appear.
Any help would be appreciated.
Here is my HTML:
<div>
<label for="title" class="label">Title</label>
<select name="title" id="title">
<option></option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss.</option>
<option value="ms">Ms.</option>
<option value="dr">Dr.</option>
<option value="lady">Lady.</option>
<option value="rev">Rev.</option>
<option value="sir">Sir.</option>
<option value="other">Other</option>
</select>
<input name="other_title" style="margin-left:10px;" type="text" id="other_title" size="10">
</div>
Here is my Javascript/jQuery:
<script>
jQuery(function( $ ) {
$('#other_title').hide('fast');
$(function() {
if ($('#title option:selected').text() == 'other') {
$('#other_title').show('fast');
}
}); // end function
});
</script>
Would this be of any help?
$('#title').on('change', function() {
if ($(this).val() == 'other') $('#other_title').show('fast');
else $('#other_title').hide('fast'); // This too?
});
Edit: Fixed syntax error. :p
Try using change event and replacing
if ($('#title option:selected').text() == 'other')
with
if ($('#title>option:selected').text() == 'other')
You can refer the plunkr for reference:
https://plnkr.co/edit/R2w25NEwUbiw00r2lEs3

Categories