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 = '';
Related
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>
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 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();
So I'm pretty baffled with this issue I have here. I'm almost certain this code is correct yet the list box that I want to appear is not showing up at all after something is selected from the first drop down box. Here is what I have going for the code now
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function view_private_user_list(){
var i = document.status.private_users.options[document.status.private_users.selectedIndex].value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="visible";
}
}
</script>
</head>
<body>
<div id="show_private_option">
<select id="private_users" onChange="view_private_user_list()">
<option value="0" SELECTED>Select user....</option>
<option value="1">Vincent</option>
</select>
<div id="private_select_now" style="visibility:hidden">
<select size="3">
<option value="">{#template_dlg.select}...</option>
<option value="SOOOOLDmax.htm">SOOOOLDmax</option>
<option value="mike.htm">tester</option>
</select>
</div>
</div>
</body>
</html>
This fiddle should work:
http://jsfiddle.net/3XENR/1/
I think the way you're trying to find out the current value of the dropdown doesn't quite work.
Try this version of the function instead.
function view_private_user_list(){
var selectEl = document.getElementById('private_users');
var i = selectEl.value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="hidden";
}
}
Try:
document.getElementById('private_select_now').style.display ="block";
and
document.getElementById('private_select_now').style.display="none";
instead
instead of visibility, use display
<script type="text/javascript">
function view_private_user_list(){
var i = document.getElementById('private_users').selectedIndex.value
if(i == 1){
document.getElementById('private_select_now').style.display="block";
} else{
document.getElementById('private_select_now').style.display="none";
}
}
</script>
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/