I am trying to hide a div (id #pagos) when a select input (id #buy_sell) option has been chosen (using select2).
Doing it with JQuery and a standard select box is pretty easy, but I'm a bit new to using select2 and everything has gotten complicated.
So far, I have not been able to find a script that works, that's why I come to you.
This is the code I have so far. I would be very grateful for any corrections to make it work.
<script>
$("#buy_sell").change(function() {
if ($("#buy_sell").select2("val") == "241|Vendo") {
$('#pagos').show();
} else {
$('#pagos').hide();
}
});
$("#buy_sell").trigger("change");
</script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div>
<select id="buy_sell">
<option value="1">First option</option>
<option value="2">Last option</option>
</select>
<div id="pagos">Will be hidden if "2" is selected</div>
</div>
<script>
$('document').ready(function() {
$('select').select2();
$('#buy_sell').on('change', function (e) {
if (e.target.value === '2') {
$('#pagos').hide();
} else {
$('#pagos').show();
}
})
})
</script>
Related
I'm trying to create a webpage where the options in the second dropdown menu depend on the value selected in the first dropdown menu. However, when running the webpage, the options in the second dropdown do not change regardless of what is selected in the first dropdown. The Browser does indicate that it SEES the javascript file, but it just doesn't appear to be actually running it for some reason. Anyone know what's going on?
$(document).ready(function() {
$convertfrom = $("select[name='ConvertFrom']");
$convertto = $("select[name='ConvertTo']");
$convertto.change(function() {
if ($(this).val() == "Binary") {
$("select[name='convertto'] option").remove();
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Decimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Octal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "HexaDecimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Practice</title>
</head>
<body>
<p> Welcome to the Practice Page. On this page, you can randomly generate a problem and see if you can solve it correctly.
Please select a base to convert from below. You'll then be asked to select a base to convert to, and then given a problem to solve. </p>
<form>
<select id="ConvertFrom">
<option value="Select">Select</option>
<option value="Binary">Binary</option>
<option value="Decimal">Decimal</option>
<option value="Octal">Octal</option>
<option value="HexaDecimal">HexaDecimal</option>
</select>
<select id="ConvertTo">
<option value="Convertto">ConvertTo</option>
</select>
</form>
<script src="file:///C:/Users/johnt/Documents/Catan/practice2.js"></script>
</body>
</html>
You made four mistakes.
$convertfrom = $("select[name='ConvertFrom']"); has to be $('#ConvertFrom');
$convertto = $("select[name='ConvertTo']"); has to be $('#ConvertTo');
$convertto.change(function() { has to be $convertfrom.change(function() {
$("select[name='convertto'] option").remove() has to be $convertto.innerHTML = '';
This code works in JSFiddle fine however when I put in in a dreamweaver document or try it in a browser the div never shows. The aim is to get the div 'sreturned' to show when the user selects value '1' from the drop down. I have the code in two seperate files and link them. Any help greatly appreciated.
Here is the HTML
<body>
<script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
<select id = "typeoption">
<option value="0">Qualifying Bet</option>
<option value="1">Free Bet</option>
<option value="2">Risk Free Bet</option>
</select>
<div style='display:none;' id='sreturned'> Stake Returned
</div>
</body>
Here is the script
$(document).ready(function(){
$('#typeoption').on('change', function() {
if ( this.value == '1')
{
$("#sreturned").show();
}
else
{
$("#sreturned").hide();
}
});
});
EDIT: JSFiddle include jquery in all pages
Do you have add jquery script ? Try this file :
<body>
<script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
<select id = "typeoption">
<option value="0">Qualifying Bet</option>
<option value="1">Free Bet</option>
<option value="2">Risk Free Bet</option>
</select>
<div style='display:none;' id='sreturned'> Stake Returned
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('#typeoption').on('change', function() {
if ( this.value == '1')
{
$("#sreturned").show();
}
else
{
$("#sreturned").hide();
}
});
});
</script>
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>
I am creating a business options form (rough description I know, but here goes). I want the first select that pops up to be to choose an Entity Type (IE: Corporation, LLC, LLP, etc). Once one of these is chosen, I want to .show() the next form. Here is what I've tried so far:
HTML FILE
<head>
<link rel="stylesheet" type="text/css" href="hide.css">
<script src="//code.jquery.com/jquery-1.10.2.js">
function getEntityType(sel) {
var openingEntityType = sel.value;
$("#basicOpeningEntityInformation").show();
}
</script>
</head>
<body>
<select id="oet" onchange="getEntityType(this)">
<option value="">Select an Option</option>
<option value="inc">Corporation</option>
<option value="llc">Limited Liability Company</option>
<option value="llp">Limited Liability Partnership</option>
<option value="lp">Limited Partnership</option>
<option value="gp">General Partnership</option>
<option value="jv">Joint Venture</option>
<option value="dba">Sole Proprietorship</option>
</select>
<br/>
<br/>
<form id="basicOpeningEntityInformation">
Entity Name:
<input type="text" id="openingEntityName">
<br/>
</form>
</body>
CSS FILE:
#basicOpeningEntityInformation {
display: none;
}
When the page loads, #basicOpeningEntityInformation is hidden. I want it to be unhide when a select from above is chosen. I tested my console and the select is passing it's value to var openingEntityType as it should; however, it is not making the other form visible. I tired with both .basicOpeningEntityInformation and #basicOpeningEntityInformation and neither seem to work (both in the CSS and the Script.
Thank you!
You need to check if the selected value is one of the required values:
$('#oet').on('change', function() {
var selectedItem = $(this).val();
if (selectedItem == 'inc' || selectedItem == 'llc' || selectedItem == 'llp') {
$('#basicOpeningEntityInformation').show();
} else {
$('#basicOpeningEntityInformation').hide();
}
});
Demo: https://jsfiddle.net/tusharj/L4b0wpts/1/
Try adding this..it will work
<head>
<link rel="stylesheet" type="text/css" href="hide.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"> </script>
<script>
function getEntityType(sel) {
var openingEntityType = sel.value;
jQuery("#basicOpeningEntityInformation").show();
}
</script>
</head>
you are using $(".basicOpeningEntityInformation").show();
so change the
id="basicOpeningEntityInformation" to class="basicOpeningEntityInformation"
OR
$(".basicOpeningEntityInformation").show(); to $("#basicOpeningEntityInformation").show();
Hopefully I can get help from you guys..I got a simple script below but not sure why is this not working.
Wanted to limit the text length of the textarea depends on the select dropdown value. Please advise.
HTML:
<select class="productoptionname_card-type" id="Option111453" name="Option111453">
<option value="">Please select...</option>
<option value="1127125">Free Message Card</option>
<option value="1127126">Greeting Cart</option>
</select>
<textarea class="productoptionname_message" style="width: auto" tabindex="5"></textarea>
<span id="charsLeft"></span>
JQuery:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://jquery-limit.googlecode.com/files/jquery.limit-1.2.source.js" type="text/javascript"></script>
<script language="javascript">
function ResetText() {
if ( $('#Option111453 option:selected').text() == "Free Message Card" ) {
$('textarea.productoptionname_message').limit('5','#charsLeft');
}
else if ( $('#Option111453 option:selected').text() == "Greeting Cart" ) {
$('textarea.productoptionname_message').limit('10','#charsLeft');
}
}
$().ready(function() {
$('textarea.productoptionname_message').keyup(function() { ResetText(); });
$('#Option111592').change(function() { ResetText(); });
});
</script>
Thanks much!
The extension (JQuery.limit) not works properly.
I just write a custom jquery limit extension for you.
you can test it here: http://jsfiddle.net/tcWHr/