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();
}});});

Show div element if select option from one select AND another select

I want to know how to show one element after I select option from one select and then select option from another select. If I have 2 selected options the div need to show, else to hide. I tried this, but it is not working. How can I do it with change function or something else ? Thanks.
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}

You need to wrap your code in a "change" event listener.
There are several ways of doing it, but this should work fine.
$('select.one').change(function() {
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});

Try this
$(document).on("change","select.one,select.two",function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
});

Here you go with a solution https://jsfiddle.net/axaryfb2/
$('select').change(function(){
if (($('select.one option').is(':selected') && $('select.one option:selected').val() != "") && ($('select.two option').is(':selected') && $('select.two option:selected').val() != "")) {
$('.box').show();
} else {
$('.box').hide();
}
});
.box{
width: 100px;
height:100px;
background: blue;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option value="">Select Option</option>
<option value="test1">test 1</option>
<option value="test2">test 2</option>
</select>
<select class="two">
<option value="">Select Option</option>
<option value="testA">test A</option>
<option value="testB">test B</option>
</select>
<div class="box">
</div>
JS
$('select').change(function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
Hope this will help you.

Try this
Ive included a listener on all select elements on the page that have the class demoSelect.
You dont want to add a listener to all select elements on your page as you may have other select elements that dont require the same logic. Wrapping them in a class and then selecting on the class instead allows for this.
//use the on() method to attach event handlers, this replaces the live(), delegate() and bind() methods from previous JQuery versions
$(".demoSelect").on("change", function()
{
//if values for both dropdowns are set to "1"
if( $("#one").val() == "1" && $("#two").val() == "1")
{
//show the div
$(".box").show();
}
else
{
//hide the div
$(".box").hide();
}
});
.container
{
border: 1px solid black;
height: 70px;
}
.padding
{
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- example of select options that are affected by the above javascript !-->
<div class="container">
<div class="padding">
<span>
This select group uses the script because of the '.demoSelect' class
</span><br/>
<select id="one" class="demoSelect">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
<select id="two" class="demoSelect">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
</div>
<div class="box padding" hidden>test</div>
</div><br/>
<!-- example of select options that arent affected by the above javascript !-->
<div class="container">
<div class="padding">
<span>
This select group is unaffected by the script
</span><br/>
<select id="separateSelectOptionOne">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
<select id="separateSelectOptionTwo">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
</div>
</div>
More info on the on() method here

How to change a border color of html select tag if value is empty or 0

I have 4 select tag with class name select2 assigned to it. I want to make the border turn to red if there's no selected options or has an value equal to empty or 0. I've tried to add class using jquery but it makes all select.select2 border turns red.
Style
<style>
.errorType {
border-color: #F00 !important;
}
</style>
HTML
<select name="category" class="form-control select2" id="category" onChange="search_Operator(this.value)">
<option value="0"> Select Operator Category</option>
<option value="1">one</option> <option value="2"> two</option>
</select>
<select name="operatorName" class="form-control select2" id="operatorName" onChange="">
<option value="0"> Select operator Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="regionName" class="form-control select2" id="regionName">
<option value="0"> Select region Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="type" class="form-control select2" id="type">
<option value="0"> Select type </option>
</select>
JQUERY
$(function () {
$(".select2").select2();
});
$(".select2-selection").addClass('errorType');
Any idea?
Thanks in advance.

I've attached a function to the click event of the submit button, in order to check the value of every select element on the page:
$(function () {
$('.form-control-select2').select2();
$('#submit_btn').on('click', function(){
var submit_form = true;
$(".form-control-select2").each(function(){
var selected_value = $(this).val();
if (selected_value==0 || selected_value=='') {
$(this).next().find('.select2-selection').addClass('errorType');
submit_form = false;
} else {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
return submit_form;
});
});
Fiddle here: https://jsfiddle.net/64a41thz/21/.
Also, if you want to remove the red border when valid selection is made, add the following code:
$('.form-control-select2').on('change', function(){
if ($(this).val()!=0 && $(this).val()!='') {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
Fiddle here: https://jsfiddle.net/64a41thz/24/.

This does the trick. You just need to replace #yourButton with the actual ID you use.
$(document).on("click", "#yourButton", function() {
$(".select2").each(function(index, element) {
$(element).removeClass("errorType");
if ($(element).val() === "0") {
$(element).addClass("errorType");
}
});
});

Put your select tag inside a form with an id="submit" as shown
<form class="" action="" method="post" id="submit">
and add a button below the 4 select tags with this attribute
onclick="return submit_form('form#submit')"
the button should be like this,
<button type="button" class="btn btn-default" onclick="return submit_form('form#submit')">Submit</button>
In your jquery
function submit_form (form_id) {
$(form_id).find('select[name]').each(function (index, node) {
if (node.value == 0) {
var id = "select#" + node.id;
$(id).addClass('errorType');
}
});
}
This will search select tag with name as attribute, if found, it will get the value of the name and check of its empty or not. If found empty it will add new class that turns that select tag into a red border.
Hope this will help

jquery click not work on select tag in chrome

I have a problem with jquery click in my code. my code this is:
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".mapg").hide();
});
$("#show").click(function(){
$(".mapg").show();
});
});
</script>
<select name="showmapg" id="showmapg" class="form-control" required>
<option value="0">Select</option>
<option id="show" value="1">Yes</option>
<option id="hide" value="2">No</option>
</select>
<p class="mapg" style="display: none;">Hello</p>
my code work in firefox but it's not work in chrome. how can do it?

You should register your click event to select element itself and not to its options..
Making it as simple as possible. Try this
$(document).ready(function(){
$("#showmapg").change(function(){ // or .click(function(){
if(this.value == 2) {
$(".mapg").hide();
}else{ //use else if , if you want to nothing to happen on select option
$(".mapg").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="showmapg" id="showmapg" class="form-control" required>
<option value="0">Select</option>
<option id="show" value="1">Yes</option>
<option id="hide" value="2">No</option>
</select>
<p class="mapg" style="display: none;">Hello</p>

your code would be:
<script>
$(document).ready(function(){
$("#showmapg").change(function(){
if($(this).val()==1){
$('.mapg').show();
}
else if($(this).val()==2){
$('.mapg').hide();
}
});
});
</script>

Click event is not valid for option elements. Use .change() event of select to show/hide element:
$('#showmapg').change(function(){
if($(this).val()=="1")
$(".mapg").show();
else
$(".mapg").hide();
});
Working Demo

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()
)
}
);