I have a select list with values 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.
Form is:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And javascript for this is:
ShowPrivileges: function() {
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
if (select === 'custom') {
$('.resources').show();
}
});
}
How should this look in order to work? Sorry, I know this should be simple, but I am new with all this.
You need to use val method:
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'custom') {
$('.resources').show();
}
else $('.resources').hide(); // hide div if value is not "custom"
});
http://jsfiddle.net/RWUdb/
You can clean up the HTML by dropping the onClick and removing the IDs from the options.
HTML:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option value="all">All</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And your JavaScript could simply do this:
$('#privileges').on('change', function() {
if($(this).val() === 'all') {
$('.resources').hide();
} else {
$('.resources').show();
}
});
Privileges.on('change',function(){
if($(this).val()=='custom'){
$('.resources').show();
}else{
$('.resources').hide();
}
})
You will want to add the event handler:
$("#privileges").change(craateUserJsObject.ShowPrivileges);
Then, within your ShowPrivileges funciton:
var val = $("#privileges").val();
if(val == "whatever")
//do something
else
//do something
$("#privileges").change(function(){
var select= $(this).val();
if(select=='custom'){
//some code
}
});
or
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}
You are making this too complicated:
First off, drop the inline onclick. Since you are using jQuery, attach your handler dynamically.
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
Secondly, don't listen for the click and then attach the change handler. Attach it directly
<script>
jQuery('#privileges').on('change',function(){
if(jQuery(this).val()=='custom'){
jQuery('.resources').show();
} else {
jQuery('.resources').hide();
}
});
</script>
That could be done with `toggle()` as a shorthand :
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
If you want to toggle the display in the page load you could trigger the same change() event, like :
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
}).change();
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
Maybe someone can tell me how i can repair problem with choosing from Paypal/Bitcoin/Credit Card, coz i tried almost everything, nothing work like it should
I tried also to make them child()/children()/next() and so on nothing help
<select id="payment" name="user-payment">
<option value="select method">Select Payment Method</option>
<option value="Credit Card">Credit Card</option>
<option value="PayPal">PayPal</option>
<option value="Bitcoin">Bitcoin</option>
</select>
$paymentOptionsCard.change(()=>{
// if credit card
if($paymentOptions.val()==='Credit Card'){
$creditCard.show();
bullPay = true;
}
else{
$creditCard.hide();
bullPay = false;
}
});
$paymentOptionsPaypal.change(()=>{
if($paymentOptionsPaypal.val()==="PayPal"){
$paypal.show();
bullPay = true;
}
else{
$paypal.hide();
bullPay = false;
}});
$paymentOptionsBitcoin.change(()=>{
//if bitcoin
if($paymentOptionsBitcoin.val()==="Bitcoin"){
$bitcoin.show();
bullPay = true;
}
else{
$bitcoin.hide();
bullPay = false;
}
});
That's the variables /
//getting payment options
const $paymentOptions = $("#payment");
//selecting default as Credit card
const $paymentOptionsBitcoin = $paymentOptions.val("Bitcoin");
const $paymentOptionsPaypal = $paymentOptions.val("PayPal");
const $paymentOptionsCard = $paymentOptions.val("Credit Card");
I expect that code will "show" or 'hide' values and if that true or false attribute will assign it to the variables.
Now it only show, without assigning all of them
You bind to the select with the change, not its options. You should just bind one change event to the select. This is a easy way of doing it without repeating a lot of code.
// reference the select element
var sel = document.querySelector('#payment')
// add change event
sel.addEventListener('change', () => {
// get the section that is active
var paymentActive = document.querySelector('.payment-section.active')
// if we have one hide it.
if (paymentActive) paymentActive.classList.remove("active")
// reference the option value that was selected
var selection = sel.value
// select the section based on the value
var payment = document.querySelector("#" + selection)
// show the section
if (payment) payment.classList.add("active")
})
.payment-section {
display: none;
}
.payment-section.active {
display: block;
}
<select id="payment" name="user-payment">
<option value="select method">Select Payment Method</option>
<option value="CreditCard">Credit Card</option>
<option value="PayPal">PayPal</option>
<option value="Bitcoin">Bitcoin</option>
</select>
<div id="CreditCard" class="payment-section">Credit Card</div>
<div id="PayPal" class="payment-section">Pay Pal</div>
<div id="Bitcoin" class="payment-section">Bitcoin</div>
I am not very clear of the question but one mistake I can point out is that on the second and third onchange event the "if" condition seems to be wrong
if($paymentOptionsPaypal.val()==="PayPal")
if($paymentOptionsBitcoin.val()==="Bitcoin")
should have been
if($paymentOptions.val()==="PayPal")
if($paymentOptions.val()==="Bitcoin")
$(function() {
$('#payment').change(function(){
$('.colors').hide();
var pm= $(this).val();
$('#' + pm).show();
if(pm=='credit_Card'){
console.log('Credit Card');
}
else if(pm=='payPal'){
console.log('PayPal');
}
else if(pm=='bitcoin'){
console.log('Bitcoin');
}
});
});
#credit_Card,#payPal,#bitcoin {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button dropdown">
<select id="payment">
<option value="">Select Payment Method</option>
<option value="credit_Card">Credit Card</option>
<option value="payPal">PayPal</option>
<option value="bitcoin">Bitcoin</option>
</select>
</div>
<div class="output">
<div id="credit_Card" class="colors red"> Your Payment method is Credit Card</div>
<div id="payPal" class="colors yellow"> Your Payment method is PayPal</div>
<div id="bitcoin" class="colors blue"> Your Payment method is Bitcoin</div>
</div>
<footer>
<small>
i got one more doubt im close to the answer but not getting it to worked, Actually i have the a default input text & default drop-down(drop-down which consist of west Bengal & others). NOW if some one click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.Below is the code what i have tried.can any one please guideme a bit new to jQuery.
thanks!!
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group otherdistricts">
<input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").on("select",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
</script>
You have errors in the jquery code. Use the below code, it is working fine and tested.
<script>
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
//enter bengal districts
if($(this).attr("value")=="WestBengal"){
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if($(this).attr("value")=="Others"){
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>
Your closing parentheses and brackets are the other way around in your javaScript code.
Should be like this
$(document).ready(function () { code here });
But you have
$(document).ready(function () { code here )};
Try this
<script>
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
//enter bengal districts
if ($(this).attr("value") == "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if ($(this).attr("value") == "Others") {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>
$(document).ready(function () {
$("select").change(function () {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Your code has error. Your code is:
$(document).ready(function())};
Change to:
$(document).ready(function()});
Since select is a form element you can right use val() method instead of $(this).attr("value") to get value.
You have several issues in your code. First of all, your closing brackets are wrong. You should have )}; instead of });
Your inputfield has display: none, you should remove that, because $(".enterotherstates").show(); won't let it appear, only the parent element.
Next, you don't need to iterate with each. It's easier and faster to use $(this).
$(document).ready(function() {
$("select").change(function() {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
} else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Optional performance advice
you could make your code faster by caching your jQuery objects and reuse them. So the browser doesn't have to search the complete HTML again and again:
$(document).ready(function() {
var otherStates = $(".enterotherstates");
var bengal = $(".enterbengaldistricts");
$("select").change(function() {
if ($(this).val() === "WestBengal") {
otherStates.hide();
bengal.show();
} else {
bengal.hide();
otherStates.show();
}
});
});
answer to your updated question
$(document).ready(function(){
$(".westbengaldistrict").hide(); // first hide the select
$("#state").on("change",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show(); // show on change
}
});
});
Below is the updated jquery code as per the updated question. It is working fine and tested.
$(document).ready(function(){
$("#state").change(function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".otherdistricts").show();
$(".westbengaldistrict").hide();
}
});
});
I have a formula page where the dropdowns has a default value = 0.
I would like it to hide a div when the value is = 0, even when the page is loaded.
I believe i should use javascript, but should i use jQuery?
i tried with and without jQuery, but couldn't get my code to work.
This is the dropdown
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv">
<option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option>
This is the div i want to hide.
<div id="product-description" class="product-description"></div>
i tried this JS
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sel-lease-product").change(function() {
if(jQuery(this).find("option:selected").val() == 0) {
jQuery(".product-description").hide();
}
});
});
</script>
and JS
function hideDiv(elem) {
if(elem.value == 0){
document.getElementById("product-description").style.display = "none";
} }
My whole code looks like this http://pastebin.com/WTFu3Hte
what am i doing wrong?
Try this code:
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change();
});
If you want execute the code when the page is load remember to run the event change your select
Result: https://jsfiddle.net/cmedina/mwz5udwz/
Invoke the change handler initially to achieve expected results on page load using jQuery.change().
jQuery.toggle could be used instead of using both jQuery.show and jQuery.hide
Note: Use either of JavaScript or jQuery, do not use them together!
$(document).ready(function() {
$("#sel-lease-product").change(function() {
$(".product-description").toggle(this.value != 0);
}).change();
//-^^^^^^^^
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="product-description">Content here....</div>
If you need to check the onchange() value that is from the select tag you can prefer two methods
Directly write the onchange() function to the select tag itself
Invoke the function with the help if select ID so that you can write the on change over to the script itself.
Method One:
HTML:
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);">
<option value="">Please Select</option>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<div id="product-description" class="product-description">product-description</div>
JS:
function hide_function(a)
{
if(a=='0')
{
$('#product-description').hide();
}
else
{
$('#product-description').show();
}
}
Method Two:
Directly calling the on change function in the script file itself.
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change(); //Again invoking the change function on-load of the page
});
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() == 0) {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="">select</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<div id="product-description" class="product-description">Hide if 0</div>
Well your code will never reshow the value so you need to do if/else type of check. The nice thing is jQuery has it built in so you can just call toggle with a boolean.
Also there is not need to look for the selected option, val() will do that for you. And to make sure the element is in the correct state when the page loads, you want to trigger the change event.
$("#sel-lease-product").on("change", function() {
$(".product-description").toggle($(this).val() !== "0");
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel-lease-product">
<option value="0">Pick</option>
<option value="1">FOO</option>
</select>
<div class="product-description">Description</div>
Try this :
$(document).ready(function() {
$("#sel-lease-product").on("change",function(){
if($(this).val() == 0) {
$(".product-description").hide();
}
}).change();
})
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id="product-description" class="product-description">product-description</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
To get straight to the point here's I want to accomplish. I want to hide a certain DIV when a certain <OPTION> in <SELECT> was selected.
Here's my HTML markup:
THE SELECT
<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
<option value="">Choose One</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="semimonthly">Semi Monthly</option>
<option value="monthly">Monthly</option>
</select>
and the DIV I want to hide if DAILY was selected.
THE PERIOD
<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">
<!--PERIOD-->
<label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
<select name="period" id="period" class="text ui-widget-content ui-corner-all">
<option value="">Choose Period</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--PERIOD-->
</div>
I have tried using different query but I cannot do what I want. Here's the query I used but its not functioning and if I may ask for another jQuery suggestion that actually might work the greater. Thanks to all in advance.
HERE'S THE QUERY
<script type="text/javascript">
$("#cutoffselect").change(function(){
$("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
</script>
this will do it:
<script type="text/javascript">
$(function(){
$("#cutoff").change(function(){
if($(this).val()=='daily'){
$('#perioddiv').hide();
}
else{
$('#perioddiv').show();
}
});
});
</script>
here is your answer.
$('#cutoff').change(function () {
if ($('#cutoff').find(":selected").text() == 'Daily') {
$('#perioddiv').hide();
} else {
$('#perioddiv').show();
}
});
jsfiddle:
http://jsfiddle.net/LNMW3/
Check this Fiddle
Using the ID's you can easily sort this out by using:
$("#selectorID").hide();
try
$("#cutoff").change(function () {
if (this.value == "daily") {
$("#perioddiv").hide();
} else {
$("#perioddiv").show();
}
});
DEMO
try this:
$('#period').change(function(){
// check if "daily" is selected
if($(this).val() == "daily") {
$('#perioddiv').hide();
}
});
Check if the selected option is daily and then hide the div.
$(document).ready(function(){
$('#cutoff').change(function(){
if($('#cutoff option:selected').val() == 'daily')
{
$('#perioddiv').hide();
}
else
{
$('#perioddiv').show();
}
});
});
DEMO FIDDLE
To hide div with id=perioddiv when daily option selected, you can try below jquery:
<script type="text/javascript">
// bind change event using '#cutoff' as select id="cutoff"
$("#cutoff").change(function(){
// hide if selected value is "daily"
if($(this).val() == "daily")
$("#perioddiv").hide();
else
$("#perioddiv").show();
});
</script>