We Keep Coding

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!

How to check if either select box or text inputs are empty with jQuery

I have a form with 2 select boxes and a text input. On change of any of those 3 elements I want to run a check to see if any of the elements are empty(no value) and then change a variable. Here's what I have tried so far:
var emptyFields = true;
var inputs = $('input[type="text"], select').on('keyup change', function() {
inputs.each(function() {
var elm = $(this),
val = elm.val();
if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) {
emptyFields = false;
return false;
}
});
$('.info span').text(emptyFields);
});
.info {
margin-top:20px;
}
span {
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>
<input type="text" />
<div class="info">Empty fields? <span></span></div>
The issue I am having now is that the variable is changing to false even before all 3 elements have a value. If you are completing the elements from left to right, the variable should not return false until you've entered a character into the text input after making a selection in each select box.

First problem: Once you set the variable to false during a check, you never change it back to true in future checks. You should use a local variable, which you initialize each time you call the function.
Second problem: You have your check backwards. Since you want to show true if any of the fields are empty, you need to initialize the variable to false, then set it to true when you find an empty field.
var inputs = $('input[type="text"], select').on('keyup change', function() {
var emptyFields = false;
inputs.each(function() {
var elm = $(this),
val = elm.val();
if ((val == '0' && elm.is('select')) || (val == '' && elm.is('input'))) {
emptyFields = true;
return false;
}
});
$('.info span').text(emptyFields);
});
.info {
margin-top:20px;
}
span {
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>
<input type="text" />
<div class="info">Empty fields? <span></span></div>

How to use the same function in different ways?

I have two dropdowns. When I select an option in the first dropdown, the second dropdown values will be changed according to the first dropdown values.
HTML CODE
<select id="one">
<option value="a">A</option>
<option value="b">B</option>
</select>
<select id="two">
<option value="a">A</option>
<option value="b">B</option>
</select>
JS CODE
$("#one").change(function () {
if ($("#one").val() == 'a') {
$("#two").val("b")
} else if ($("#one").val() == 'b') {
$("#two").val("a")
}
});
$("#two").change(function () {
if ($("#two").val() == 'a') {
$("#one").val("b")
} else if ($("#two").val() == 'b') {
$("#one").val("a")
}
});
Both the code for two dropdowns do the same function. Is there any efficient way to reduce the code? Like declaring a common function and using it for both dropdowns (like a prototype)?
Here is the JSFiddle.

Add common class to the both drop-down.
Bind change event on the elements using common class
Use siblings() to set the value of other drop-down
Use trigger() to update the drop-down values on page load.
Demo
$('.mySelect').on('change', function() {
var newVal = $(this).val() == 'a' ? 'b' : 'a';
$(this).siblings('.mySelect').val(newVal);
// Even Shorter
// $(this).siblings('.mySelect').val($(this).val() == 'a' ? 'b' : 'a');
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="one" class="mySelect">
<option value="a">A</option>
<option value="b">B</option>
</select>
<select id="two" class="mySelect">
<option value="a">A</option>
<option value="b">B</option>
</select>

Like this?
$('#one,#two').on('change', function() {
var other = ( $(this).attr('id') == 'one' ) ? '#two' : '#one';
var value = ( $(this).val() == 'a' ) ? 'b' : 'a';
$(other).val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
<option value="a">A</option>
<option value="b">B</option>
</select>
<select id="two">
<option value="a">A</option>
<option value="b">B</option>
</select>

Of course, there are many ways to do it:
function onChange($element, $other) {
if($element.val() == 'a'){
$other.val("b")
}else if($other.val() == 'b'){
$element.val("a")
}
}
See it here:
function onChange($element, $other) {
if ($element.val() == 'a') {
$other.val("b")
} else if ($element.val() == 'b') {
$other.val("a")
}
}
$('#one, #two').change(function() {
var other = $('#one, #two').not(this);
onChange($(this), other);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
<option value="a">A</option>
<option value="b">B</option>
</select>
<select id="two">
<option value="a">A</option>
<option value="b">B</option>
</select>

Make it a function with two arguments to pass your dropdown ids:
$("#one").change(switchSelection("#two", "#one"));
$("#two").change(switchSelection("#one", "#two"));
function switchSelection(x, y) {
if($(y).val() == 'a') {
$(x).val("b")
}
else if ($(x).val() == 'b') {
$(y).val("a");
}
};

The simplest way (given your code) - though not the most efficient - would be to pass the select elements in as parameters to a common function call.
var handleChange = function($select, $linkedSelect){
if($select.val() == 'a'){
$linkedSelect.val("b")
}else if($select.val() == 'b'){
$linkedSelect.val("a")
}
};
$("#one").change(function(){
handleChange($(this),$('#two'));
});
$("#two").change(function(){
handleChange($(this),$('#one'));
});
Here's a fiddle of that in action.

$('#one,#two').change(function() {
var opositeIdObj = {"one":"two","two":"one"};
var opositeValObj = {"a":"b","b":"a"};
$("#"+opositeIdObj[this.id]).val(opositeValObj[this.value]);
}).trigger('change');

Check if all dropdowns are empty or not jQuery

I have three select elements:
<select id="first">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="second">
<option></option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
<select id="three">
<option></option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i"></option>
</select>
All three of them must either be empty (first option), or have a value.
So <option></option> <option></option> <option></option> is ok
but not <option value="a">a</option> <option></option> <option></option> kinda thing.
I've tried this, but it isn't working as it doesn't allow all three to be empty and quits on the first case
if($("#first").val() === "" || $("#second").val() === "" || $("#third").val() === ""){
return false;
}
Any help? I would like to do this as short/nice looking as possible

You could
var $selects = $('#first, #second, #three'),
$selected = $selects.filter(function () {
return this.value != ''
});
if ($selected.length != 0 && $selected.length != $selects.length) {
return false;
}
Demo: Fiddle

var first = $("#first").val();
var second = $("#first").val();
var three = $("#first").val();
var isValid = false;
if((first.length>0 && second.length>0 && three.length>0) || (first.length==0 && second.length>== && three.length==0)){
isValid = true;
}

Try this:
if($("#first").find('option').length <=1 || $("#second").find('option').length <=1 || $("#third").find('option').length <=1){
return false;
}

javascript-dropdown option remove

I have three dropdowns
First dropdown options are
option1
option2
2nd and third dropdowns are
optionA
OptionB
When I select option2 in first dropdown
I should remove optionA from both dropdowns.
When I select option1, my both dropdowns should repopulate with original values.
I am using the following code to remove from one dropdown only
Can anybody point me how to do two dropdowns at same time please.
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function()
{
var sites='#firstDDId';
$('#firstDDId').change(function()
{
if($(sites).val()=='Option1' )
{
alert(" Please note, optionA will be removed");
$("#secondDDId option[value='OptionA']").remove();
}
else
{
var exists = false;
$('#SecondDDId option').each(function()
{
if (this.value == 'OptionA')
{
exists = true;
return false;
}
}
);
if (exists==false)
{
$("#SecondDDId").append('<option value="OptionA">OptionA</option>');
}
}
});
});
</script>

Store your options first in an array and then you can repopulate your select options every time you need.

Change $("#secondDDId option[value='OptionA']").remove();
into $("option[value='OptionA']").remove();
This will remove all the options with value OptionA.
if ($("#SecondDDId option[value='OptionA']").length == 0)
$("#SecondDDId").append('OptionA');
This will re-add the option.
To target the second and third drop down at the same time, you could use $("select[id$='DDId'] option[value='OptionA']").

You were on the right track there. You were just missing the dynamic part. I changed some variables and id's for better readability too.
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<select id="control-ddl">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="child-ddl-1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-4">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<script>
$(document).ready(function() {
$("#control-ddl").change(function() {
// Array of child select id's; only these get the "A" option
// stripped and readded when control-ddl changes
var ddlIds = [ "#child-ddl-1", "#child-ddl-2", "#child-ddl-3" ];
$.each(ddlIds, function(idx, ddlId) {
if($("#control-ddl").val()=="2") {
$(ddlId + " option[value='A']").remove();
} else {
var exists = false;
$(ddlId + " > option").each(function() {
if (this.value == "A") {
exists = true;
return;
}
});
if (!exists) {
$(ddlId).append("<option value='A'>A</option>");
}
}
});
});
});
</script>
</body>
</html>