We Keep Coding

How to hide/show a div id with jQuery when html option select is chosen

I have an html option select with two options:
<select name="subject" id="subject">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
I also have a div element with id="human-genome".
<div id="human-genome"></div>
I want to hide this id by default and when option 1 is selected. I want to show this id when option 2 is selected.
Here is my Jquery:
$(document).ready(function(){
$("#subject").change(function(){
if($(this.val() == 'option1'){
$('#human-genome').hide();
} else {
$('#human-genome').show();
});
});
For some reason, the code isn't working. Any suggestions?
Thank you in advance!

There is a syntax error in the code you developed. I edited the code as follows to make it understandable.
$(document).ready(function(){
$("#subject").change(function(){
console.log(this.value);
if(this.value == 'option1')
{
$('#human-genome').hide();
}
else
{
$('#human-genome').show();
}
});
});
#human-genome{
margin-left: 100px;
background-color: red;
width: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="subject" id="subject">
<option value="option1">Hide</option>
<option value="option2">Show</option>
</select>
<div id="human-genome">TEST</div>

Try use $(this).val() instead of your code please.
$(document).ready(function(){
$("#subject").change(function(){
if($(this).val() == 'option1'){
$('#human-genome').hide();
} else {
$('#human-genome').show();
}});});

Jquery find each dynamically generated select inside div and add class to select if option value is " "

I have dynamically generated select fields inside a div called mydiv.
The id and class names also for each of my select fields are also dynamically generated.
I am trying to add a class called red-border to each of my select elements inside mydiv based on the value.
for example if Not mapped is selected by default its value is " " empty in my first select than class red-border gets added to my first select
Here is my js please help
$('[class^="mydiv"]').find('option').each(function() {
var myvalue= $(this).val();
if (myvalue===" "){
$(this).addClass("red-border");
}else{
$(this).addClass("green-border");
}
});
<div class="mydiv" id="mydiv">
<select id="dynamically_generated_select_169" class="someclass169">
<option value=" ">Not mapped</option>
<option value="1">Saab</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
<!-- Another select Each select and its options are all dynamically generated -->
<select id="dynamically_generated_select_170"class="someclass170">
<option value="1">Saab</option>
<option value=" ">Not mapped</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
</div>

you can not add option border color
we try your code with option background and border to select on chnage
// this example for each options
$('.mydiv select option').each(function() {
var myvalue= $(this).val();
if (myvalue===" "){
$(this).addClass("red");
}else{
$(this).addClass("green");
}
});
// this example on change select
$('.mydiv_2 select').on('change',function() {
var myvalue= $(this).val();
if (myvalue===" "){
$(this).removeClass('green-border').addClass("red-border");
}else{
$(this).removeClass('red-border').addClass("green-border");
}
});
.red {
background: #f00;
}
.green {
background: #0f0;
}
.red-border {
border:solid 1px #f00;
}
.green-border {
border:solid 1px #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Example for each options</h3>
<div class="mydiv" id="mydiv">
<select id="dynamically_generated_select_169" class="someclass169">
<option value=" ">Not mapped</option>
<option value="1">Saab</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
<!-- Another select Each select and its options are all dynamically generated -->
<select id="dynamically_generated_select_170"class="someclass170">
<option value="1">Saab</option>
<option value=" ">Not mapped</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
</div>
<br>
<h3>Example on change</h3>
<div class="mydiv_2" id="mydiv">
<select id="dynamically_generated_select_169" class="someclass169">
<option value=" ">Not mapped</option>
<option value="1">Saab</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
<!-- Another select Each select and its options are all dynamically generated -->
<select id="dynamically_generated_select_170"class="someclass170">
<option value="1">Saab</option>
<option value=" ">Not mapped</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>

You can use change with on which will check if the value is Not mapped than add a class red-border. And second was a minor typo in your code Var should be var:
$('#mydiv select').on('change', function() {
var myvalue = $(this).val();
if (myvalue === " ") {
$(this).removeClass('green-border').addClass("red-border");
} else {
$(this).removeClass('red-border').addClass("green-border");
}
});
$(document).ready(function() {
$('#mydiv select').trigger('change');
});
.red-border {
border: 3px solid red;
}
.green-border {
border: 3px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">
<select id="dynamically_generated_select_169" class="someclass169">
<option value=" ">Not mapped</option>
<option value="1">Saab</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select> // Another select Each select and its options are all dynamically generated
<select id="dynamically_generated_select_170" class="someclass170">
<option value="1">Saab</option>
<option value=" ">Not mapped</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>
</div>

You had two problems with your code:
You were finding by option tags rather than select tags - you cannot style option tags, and they do not have a specified .val().
You had Var rather than var - JS is case-sensitive
Note that your code will still only run on first load. You will need to put it into an event handler (for an event like onchange) if you want it to update dynamically.
$('[class^="mydiv"]').find('select').each(function() {
var myvalue= $(this).val();
if (myvalue===" ")
{
$(this).addClass("red-border");
}else
{
$(this).addClass("green-border");
}
});
.red-border {
border:solid 1px #f00;
}
.green-border {
border:solid 1px #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">
<select id="dynamically_generated_select_169" class="someclass169">
<option value=" " selected>Not mapped</option>
<option value="1">Saab</option>
<option value="2">VW</option>
<option value="3">Audi</option>
</select>
<select id="dynamically_generated_select_170"class="someclass170">
<option value="1">Saab</option>
<option value=" ">Not mapped</option>
<option value="2">VW</option>
<option value="3" selected>Audi</option>
</select>

Your div has un Id "mydiv" so you should use it for the selecteur of your selects. Then, you are trying to find "option" but you said yo wanted the select input. Just put your selector to the select.
It should look like that :
$('#mydiv').find('select').each(function(){
var myvalue = $(this).Val();
})
Try this out.

Hide selected option from another select box

Edit, yes I am aware of this question but that answer is not completely working for my case
I'm looking for a solution for this case
When a user selects an option from one select box the option should be hidden for the other select boxes.
When a selected option changes or is removed (select a blank option) the previously selected option should become available again to the other select boxes.
The problem with my current code:
When an option changes, the previous option is not "released" to the other select boxes so they can not use it again until the page reloads.
Basically, results in previously selected options are dissapearing from other select boxes.
I included a fiddle so you can see it for youself.
$(document).ready(function() {
// this "initializes the boxes"
$('.update-select').each(function(box) {
var value = $('.update-select')[box].value;
if (value) {
$('.update-select').not(this).find('option[value="' + value + '"]').hide();
}
});
// this is called every time a select box changes
$('.update-select').on('change', function(event) {
var prevValue = $(this).data('previous');
$('.update-select').not(this).find('option[value="' + prevValue + '"]').show();
var value = $(this).val();
if (value) {
$(this).data('previous', value);
console.log($(this).data('previous', value));
$('.update-select').not(this).find('option[value="' + value + '"]').hide();
}
});
});
* {
box-sizing: border-box;
font-size: 1em;
font-family: sans-serif;
}
body {
display: flex;
float: right;
}
body div {
margin: 20px;
}
select {
border: 2px solid #78909c;
padding: 10px;
border-radius: 5px;
outline: none
}
select:focus {
border: 2px solid #ff9800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h3>stock 1</h3>
<select name="tracker[stockitems][0]" class="update-select">
<option value=""></option>
<option value="1" selected>tracker 1</option>
<option value="3">tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>
<div>
<h3>stock 2</h3>
<select name="tracker[stockitems][1]" class="update-select">
<option value=""></option>
<option value="1">tracker 1</option>
<option value="3" selected>tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>
<div>
<h3>stock 3</h3>
<select name="tracker[stockitems][2]" class="update-select">
<option value=""></option>
<option value="1">tracker 1</option>
<option value="3">tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>

It's as simple as this. Just .show() all the option's and reinitialize the select's using your previous code.
$(document).ready(function() {
function intializeSelect() {
// this "initializes the boxes"
$('.update-select').each(function(box) {
var value = $('.update-select')[box].value;
if (value) {
$('.update-select').not(this).find('option[value="' + value + '"]').hide();
}
});
};
intializeSelect();
// this is called every time a select box changes
$('.update-select').on('change', function(event) {
$('.update-select').find('option').show();
intializeSelect();
});
});
* {
box-sizing: border-box;
font-size: 1em;
font-family: sans-serif;
}
body {
display: flex;
float: right;
}
body div {
margin: 20px;
}
select {
border: 2px solid #78909c;
padding: 10px;
border-radius: 5px;
outline: none
}
select:focus {
border: 2px solid #ff9800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h3>stock 1</h3>
<select name="tracker[stockitems][0]" class="update-select">
<option value=""></option>
<option value="1" selected>tracker 1</option>
<option value="3">tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>
<div>
<h3>stock 2</h3>
<select name="tracker[stockitems][1]" class="update-select">
<option value=""></option>
<option value="1">tracker 1</option>
<option value="3" selected>tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>
<div>
<h3>stock 3</h3>
<select name="tracker[stockitems][2]" class="update-select">
<option value=""></option>
<option value="1">tracker 1</option>
<option value="3">tracker 2</option>
<option value="4">test tracker1</option>
<option value="6">another tracker</option>
<option value="9">the last tracker</option>
</select>
</div>

This is my solution:
$(document).ready(function() {
$(document).on('change', '.update-select', function(e) {
$('option').show();
var selectedOptionsGlobal = [];
$.each($('.update-select'), function(key, select) {
var selectedOptionValue = $(select).val();
if (selectedOptionValue !== "") {
selectedOptionsGlobal.push(selectedOptionValue);
}
});
for (var i = 0; i < selectedOptionsGlobal.length; i++) {
$('option[value="'+selectedOptionsGlobal[i]+'"]').hide();
}
});
});

HtmlService Form - Dynamic DropdownList

I have a HtmlService Form that takes data from user.
There are multiple dropdownlist in the form.
Is it possible to eliminate a selection from subsequent dropdownlist, if user has already selected it in the first dropdownlist? Will google.script.run be able to do that?

What you are looking for can be done with JavaScript right on the webpage, there is no need to make any calls back to the server with google.script.run. Here is an example JSfiddle of where you can click on a dropdown list and show a new portion of a site using JQuery: https://jsfiddle.net/rorfw6mb/1/
This should show you a basic way in which you can show different elements on the page based on the users selection.
var optionsTemplates = {
'Option 1': '<span>Option 1 selected</span>',
'Option 2': '<span>Option 2 selected</span>',
'Option 3': '<span>Option 3 selected</span>',
'Option 4': '<span>Option 4 selected</span>'
};
$('select').on('change', function(){
let value = $(this).val();
console.log(value);
if(value !== ''){
$('#option-container').removeClass('hidden');
$('#option-container').html(optionsTemplates[value]);
} else {
$('#option-container').addClass('hidden');
}
})
#option-container.hidden {
display: none;
}
#option-container {
margin: 5px;
border: 2px solid blue;
width: auto;
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option></option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
<div id="option-container" class="hidden">
</div>

Adding validation to an HTML select box

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
I've tried adding both a class and ID to value 1. Then I tried something like:
function hidestuff(page){
document.getElementById(error).style.visibility="hidden";
}
function showstuff(error){
document.getElementById(error).style.visibility="visible";
}
Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?

Something like this can be achieved with a bit of jQuery:
Here's a JSFiddle
jQuery:
$(document).ready(function() {
$('#errorMsg').hide(); //ensure the error message is hidden
$('#element_3').on('change',function() {
// any option that has the class "error" will cause the error msg to be
// displayed (just in case you feel like adding a 0-17 option later)
// To target an element by ID, use $(this).find(":selected").attr('id') == 'error'
if ($(this).find(":selected").hasClass('error')) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
});
});
and a bit of HTML:
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>
and why not style it up with some CSS:
#errorMsg {
display: inline-block;
background-color: #fdd;
font: 12pt arial;
color: #f00;
padding: 2px 5px 2px 5px;
border: 1px solid #f00;
border-radius: 5px;
width: 200px;
}

I think what you must be doing is something like this
<select id="myselect" onchange="check();">
<option value="0">Select option</option>
<option value="1">op1</option>
<option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
function check() {
switch (parseInt($('#myselect').val())) {
case 0:
$('#error').show();
$('#page').hide();
break;
case 1:
$('#error').show();
$('#page').hide();
break;
case 2:
$('#error').hide();
$('#page').show();
break;
}
}
</script>
http://jsfiddle.net/SS3gc/4/