We Keep Coding

jQuery On Change Method Does Not Work Out

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>

Load data into a div when a select option is chosen

Hi I have recently been playing around with jquery. I originally had three buttons with names of cities on and using the simple jquery .load function to enter the data into another separate div.
<script>
$(document).ready(function(){
$(".London").click(function(){
$("#div1 h2").load("London.txt");
});
$(".NewYork").click(function(){
$("#div1 h2").load("NewYork.txt");
});
$(".Shanghai").click(function(){
$("#div1 h2").load("Shanghai.txt");
});
});
</script>
I now want to change this and use a select box to do the same thing however when trying this it doesn't work.
<select class="Select">
<option value="" disabled selected hidden>Select a City</option>
<option value="NewYork" class="NewYork">New York</option>
<option value="Shanghai" class="Shanghai">Shanghai</option>
<option value="London" class="London">London</option>
</select>

Use change event of <select> instead
$(function() {
var h2 = $('#div1').find('h2');
$('.Select').on('change', function(e) {
var city = $(this).val();
h2.text('City changed to:' + city);
var url = city + '.txt';
h2.load(url, function(resp, status, req) {
if ('error' === status) {
h2.text('Failed to load url: ' + url);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="Select">
<option value="" disabled='' selected=''>Select a City</option>
<option value="NewYork">New York</option>
<option value="Shanghai">Shanghai</option>
<option value="London">London</option>
</select>
<div id="div1">
<h2>Please select city from top</h2>
</div>

You will have to use change event to of select. So try this
<script>
$(document).ready(function(){
$(".Select").change(function(){
if($(this).val() === "London") { //load London.txt }
else if($(this).val() === "NewYork") { //load NewYork.txt }
else if($(this).val() === "Shanghai") { //load Shanghai.txt }
});
});
</script>

What you're doing with the selectors is wrong. <option> elements give their value attribute to the <select> when they are selected, so if you use
$(".Select").value
after you select an option, it will take the value of the selected option. Here's how I fixed your code:
$(".Select").on("change", function(){
if ($(".Select").value == "London") {
$("#div1 h2").load("London.txt");
} else if ($(".Select").value == "NewYork") {
$("#div1 h2").load("NewYork.txt");
} else if ($(".Select").value == "Shanghai") {
$("#div1 h2").load("Shanghai.txt");
}
});

show hide div based on select option value jQuery

I have a select list with value 0,1,2,3,4,5,6,7 .On select with value 0 and 1 I want to show a div, but on select with value 2,3,4,5,6,7 I want to hide that div.The code I have right now is below
HTML
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
jQuery
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() == '2','3','4','5','6','7') {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
The code actually works when I put
.val() == '2')
instead of
.val() == '2','3','4','5','6','7')
But then I cant show the div for other values

You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
Demo
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function() {
$('.rel_status').change(function() {
if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

use this it will works
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

That's not a valid way of comparing one value to many others.
if($('.rel_status').val() == '2','3','4','5','6','7')
Use a logic OR Operator instead:
if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
$('.rel_part').hide();
} else {
$('.rel_part').show();
}
Notice, that I switched the cases in the if clause so it's less code to write.

The problem is this is not a valid way to use , in Javascript, because you will end up validating if($('.rel_status').val() == '7') { instead.
You can change the code into this
if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {
and it should work.
Hope it helps!

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

div to show select menu value with jquery

i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2

$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/

Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>

Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps

Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});

$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);