I want to know how can I get the value of the selected option whenever I change the value combobox. Here's my code:
<html>
<head>
<script type="text/javascript">
function dispOptionValue() {
var select = document.getElementById('footballPlayers');
alert(select.options.value);
}
</script>
</head>
<body>
<select id="footballPlayers" onchange="dispOptionValue">
<option value="1">Ricardo Kaka</option>
<option value="2">Cristiano Ronaldo</option>
<option value="3">Johan Crujjf</option>
<option value="4">Gerd Muller</option>
<option value="5">Franz Beckenbauer</option>
</select>
</body>
</html>
I know its wrong but I don't have any idea how to start. Please help.
You can modify your code as follow:
function dispOptionValue()
{
var select = document.getElementById('footballPlayers');
alert(select.options[select.selectedIndex].value);
}
And change onChange event in dispOptionValue()
try:
<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').each(function () {
var select = $(this).val();
alert(select);
});
});
</script>
Do not forget to include js file.
Related
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>
What I want to reach:
Show an image depending on select box selection. But I don't want to take attribute value="", I want to take a custom attribute data-img="" instead.
This is the code I actually have, but it's not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
function showFormatImage() {
var image = document.getElementById("itemImage");
image.src = $('select[name=itemImage] option:selected').data('img');
return false;
}
document.getElementById("itemImage").onchange = showFormatImage;
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img id="itemImage" src="">
</body>
</html>
No image is shown. Does anybody know what's wrong?
P.S.: If there's a non-Javascript solution, that would be even better but I don't think there is.
var image = document.getElementById("itemImage");
var image is the select - not the img, also - itemImage does not exist at time of execution so the event handler isn't placed.
you should change your code to:
<html>
<head>
<script>
window.onload = function() {
document.getElementById("itemImage").onchange = showFormatImage;
};
function showFormatImage() {
var image = document.getElementById("changeImage");
image.src = $('select[name=itemImage] option:selected').attr('data-img');
return false;
}
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img src="" id='changeImage'/>
</body>
</html>
jquery solution:
$(document).ready(function(){
$('#itemImage').change(function(){
var src = $(this).find('option:selected').attr('data-img');
$('img#changeImage').attr('src',src);
});
});
Should replace .data function with .attr(data-img)
I want it so that when the DropDown List element is selected, I am able to grab it's value and set the input text, or even a DIV text, or even a label text to the value that was selected. Why doesn't it work? What am I missing?
jsfiddle: https://jsfiddle.net/fob6kp6k/
HTML:
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
JS/JQ:
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
whole thing:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
</body>
</html>
Your code has an extra ) in the line where you are setting the value. You need to update from
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
to
document.getElementById("hiddenControl").value = $("#bonus option:selected").text();
However, as you are using jquery, you should update it further to following
$("#hiddenControl").val($("#bonus option:selected").text());
For reference - http://plnkr.co/edit/3paUZ4wT4GZwZFuCL7Bj?p=preview
You can also make the below changes to make it working
$('#bonus').change(function () {
var text = $("#bonus").find(":selected").text();
$("#hiddenControl").val(text);
});
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();
<select>
<option value='34'>Trees</option>
<option value='13' class='create_sub_category'>Add new sub-category</option>
<option value='24' class='create_sub_category'>Add new sub-category</option>
<option value='57'>Cats</option>
<option value='34' class='create_sub_category'>Add new sub-category</option>
</select>
<script type='text/javascript'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
if (selected(".create_sub_category")) {
alert('hi');
}
</script>
Obviously, there's no such javascript or jQuery function called 'selected' that I used above in my if statement, but could someone help me find something that would do what I'm describing?
$('select').change(function() {
if($('select option:selected').hasClass('create_sub_category'))
{
alert("SELECTED");
}
});
You should put some id/class on that select element.
You can do this:
if($("select option:selected").hasClass("create_sub_category")) {
alert("hi");
}
The key here is: option:selected
No need for jQuery
if(/\bcreate_sub_category\b/.test(select.options[ select.selectedIndex ].className))
//...
jsFiddle