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!

Output text changes based on two drop down menus

So basically I am trying to make a page where the user can select options from two drop down menus, when the second drop down menu has been completed and both have options in them I want it to trigger some javascript that takes those values and then returns text depending on the output.
E.g. a user selects xbox and comfort trade, the price is returned as £5, or maybe they select playstation and comfort trade, the price is returned as £2.50, or maybe they want pc and player auction the price is only £0.99.
HTML
<select id="platform" name="platform">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onChange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
Javascript
function price() {
if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
I'm quite new to Javascript but I had a go at doing this, I also have spent the past hour or so trying to search for tutorials on this but nothing got it to work.

Try with this javascript function:
function price() {
if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}

A couple things need to be updated in the existing code to get this to work:
1) onchange has no capital letters, and needs to be added to "platform" <select> as well
2) no need for $ here, can simply use document.getElementById
3) after selecting the element in step 2, will need to get the value of the select by accessing the property .value on the element.
Fixed code:
<div id="app">
<select id="platform" name="platform" onchange="price()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
</div>
<script>
function price() {
if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>

Presuming you have jQuery installed because you are using $(...) in your code, you can solve your issue like this:
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
<script type="application/javascript">
window.findPrice = function() {
if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
}else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>
You can see a working example of this at: https://jsfiddle.net/L2vgqmtL/
However, I would actually propose a slightly different solution that I find more elegant:
<script type="application/javascript">
window.findPrice = function() {
var platform = $("#platform").val();
var method = $("#method").val();
var priceUpdateText = "";
if(method == 'comfortTrade'){
switch(platform){
case "xbox":
priceUpdateText = "£5";
break;
case "playstation":
priceUpdateText = "£2.50";
break;
default:
priceUpdateText = "";
}
}
$("#price").text(priceUpdateText);
}
</script>
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
A working example of this solution is available here: https://jsfiddle.net/8wafskbw/2/
Important Note: Both of these solutions operate under the presumption that have jQuery included in your page.

Note able to set count on dropdown change

I have 3 dropdown with values N/A, 3, 5, 6. On change event if I change value of first drop down the count should be 1 always but whenever I change again value is keep increasing. I know my counter is wrong but not getting idea to fix it.
$count = 0;
$maxcount = 3;
$arrOfLevel2ElementId.each(function () {
arrOfLevel2ElementId = $(this).attr('id');
$("#" + arrOfLevel2ElementId).on('change', function () {
level2ElementVal = $(this).val();
if (level2ElementVal == "N/A") {
if ($count > 0) {
$count--;
} else {
$count;
}
showOutput($sum);
return false;
} else {
if ($count <= $maxcount) {
$count++;
} else {
$count;
}
alert($count);
$sum = parseInt(level2ElementVal);
showOutput($sum);
}

This is the case because as soon as you change the dropdown, you call the function.
Here you state that if(level2ElementVal == "N/A") you decrease the count.
But in the else statement, meaning you select either 3, 5 or 6, you check if the count isn't at the maxcount. Which is not the case if $count = 1. Then you increase it. Which explains that it increases when you change the value.
I'm not sure why you have a $maxcount, but if you were to change it to 1, my assumption is that your count should not exceed 1.
EDIT:
If what I've understand correctly from your comments you want to device the three numbers, unless its on N/A.
Try this fiddle:
https://jsfiddle.net/7b21b699/1/
It sets the value field when the last field is changed and checks the values at that point. Then sums them up when needed and divides them correctly.
$("#box3").on('change', function(){
var val1 = $("#box1").val();
var val2 = $("#box2").val();
var val3 = $("#box3").val();
var sum = 0;
var count = 0;
if(val1 != "N/A"){
sum += parseInt(val1);
count++;
}
if(val2 != "N/A"){
sum += parseInt(val2);
count++;
}
if(val3 != "N/A"){
sum += parseInt(val3);
count++;
}
var result = sum / count;
$("#value").text(result);
});
<select class="form-control" id="box1" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<select class="form-control" id="box2" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<select class="form-control" id="box3" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<div id ="value">value comes here</div>

Change placeholder of input when I select Option

I have been trying out some jQuery coding but doesn't seem to work. In the #vat input, I need the placeholder to change.
<select id="VatExpense">
<option value="" disabled selected></option>
<option value="0"></option>
<option value="1"></option>
<option value="0"></option>
<option value="0"></option>
<option value="1"></option>
</select>
<input type="text" id="vat" placeholder="Rate">

You should be using data- attributes, not value to determine the rates.
Demo fiddle
HTML:
<select id="VatExpense">
<option data-rate="20" value="" disabled selected>Expense Type</option>
<option data-rate="20" value="0">Telephone</option>
<option data-rate="0" value="1">Public Transport & Taxis</option>
<option data-rate="20" value="2">Computer Consumables</option>
<option data-rate="20" value="3">Subsistence</option>
<option data-rate="0" value="4">Overseas Travel</option>
</select>
Then read them in the jQuery and change the placeholder accordingly.
Script:
<script type="text/javascript">
$(function(){
$("#VatExpense").change(function(){
$("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
});
});
</script>

You can try this:
Jquery :
$("#VatExpense").on("change", function() {
var vatExpense = $("#VatExpense option:selected").val();
var vatPlaceholder = "Rate";
if (vatExpense == 0) {
vatPlaceholder = "Standard rate 20%";
} else if (vatExpense == 1) {
vatPlaceholder = "Zero Rate 0%";
}
$("#vat").attr("placeholder", vatPlaceholder);
});
JsFiddle: http://jsfiddle.net/ghorg12110/kzmL0e1j/

You can do it like this :
(function() {
var placeholders = {
'value_':'Rate',
'value_0':'Standard rate 20%',
'value_1':'Zero Rate 0%'
};
$("#VatExpense").on('change', function(e) {
$("#vat").prop('placeholder', placeholders['value_' + $(this).val() ]);
});
})();

Try below like this Demo Here use attr()
$('#VatExpense').change(function(){
var selectedval = $(this).val();
if(selectedval == 0){
$('#vat').attr('placeholder','Standard rate 20%');
}else if(selectedval == 1){
$('#vat').attr('placeholder','Zero Rate 0%');
}
});

how to make select box dynamic

I've three select-box here to choose Format, Amount & Shipping type. After selection, it will calculate price automatically.
here, how those select-box look like:
<p>Format: <select class="calculate" name="format">
<option value="0">Please Select</option>
<option value="0">Format 1</option>
<option value="0">Format 2</option>
</select></p>
<p>Amount: <select class="calculate" name="amount">
<option value="0">Select amount</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
currently, the Amount for the both Format (Format 1/Format 2) are same.
what i'm trying to do is like: for the Format 1, the current Amount will remain same, but if user select Format 2 then the Amount will something like this:
<option value="0">Select amount</option>
<option value="300">250pcs</option>
<option value="350">1,000pcs</option>
<option value="400">2,500pcs</option>
where the value is different! how can i achive this?
here goes the JSfiddle
Thanks in advance for any help!

You should first set the new values in an array. So you can loop through them while changing the first select.
Then you can easily get the options from the 2nd select, and update them with the correct new values:
$(".calculate, #surcharge").on("change", function(){
if($(this).val() == 1)
{
var amountValues = new Array(0,250,400,500);
$("#menge option").each(function(key,value)
{
$(this).val(amountValues[key]);
});
} else if($(this).val() == 2)
{
var amount Values = new Array();
// .....
}
});
http://jsfiddle.net/7Bfk5/15/

You can do this by checking the text() in the options you are selecting
if ($('#sel option:selected').text() === 'Format 2') {
$('#amt option').each(function () {
alert($(this).text());
if ($(this).text() == "250pcs") $(this).val("300");
else if ($(this).text() == "1,000pcs") $(this).val("350");
else $(this).val("400");
});
}
working fiddle

You can create a function that does values/options replacement and call it on your select changes.
I did an example for you but used static html options to replace old ones, this might not be the best way but tried to keep it as simple as possible.
HTML
<p>Format: <select class="calculate format" name="format">
<option value="0">Please Select</option>
<option value="1">Format 1</option>
<option value="2">Format 2</option>
</select></p>
<p>Amount: <select class="calculate amount" name="menge">
<option value="0">Select Menge</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
<p>Price: <span id="total">0 €</span></p>
Javascript
var updateValues = function (){
if($('.format').val() == 1) {
html = '<option value="300">300pcs</option>';
html += '<option value="400">400pcs</option>';
html += '<option value="500">500pcs</option>';
$('.amount').html(html);
} else if( $('.format').val() == 2) {
html = '<option value="600">600pcs</option>';
html += '<option value="900">900pcs</option>';
html += '<option value="1200">1200pcs</option>';
$('.amount').html(html);
}
};
$('.format').change(function(){updateValues()});
$(".calculate, #surcharge").on("change", function(){
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
if($('#surcharge').val() != 0) {
total = total * ((100 + parseFloat($('#surcharge').val())) / 100);
}
$('#total').text(total.toFixed(2) + ' €');
});
Fiddle link
http://jsfiddle.net/7Bfk5/23/