Get combo box item value
How do I make an get combo box item value?
Uses the onchange event from a select menu to get the value of the selected item and display it in the p element w/jquery. Tested in Firefox and ie8.. What is a get combo box item value? How do you make a get combo box item value? This script and codes were developed by Rob on 30 August 2022, Tuesday.
Get combo box item value - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get combo box item value</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <select onchange="getSelectedValue(this.options[this.selectedIndex].value, this.options[this.selectedIndex].innerHTML)"> <option value="empty"></option> <option value="item1">First</option> <option value="item2">Second</option> <option value="item3">Third</option> <option value="waaaaaaaaaaaaaaaaaaaaaaaaaaaah©">long©</option>
</select>
<div id="area"> <p id="selected-value">[value here]</p> <p id="selected-option">[option here]</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Get combo box item value - Script Codes CSS Codes
p { font-family:helvetica,verdana; font-weight:bold; font-size:.9em; color:#222222;
}
#area { background-color: #cceecc; width: 100px; padding: 12px; margin: 4px; border: 1px solid #333333; border-bottom: 1px solid #888888; border-right: 1px solid #aeaeae;
}
select { margin: 4px; background-color: #f1f1ff;
}
Get combo box item value - Script Codes JS Codes
function getSelectedValue(value, option) { $('#selected-value').text(value); $('#selected-option').text(option);
}
Developer | Rob |
Username | rowinf |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 1,981 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flash Cards | 3,086 Kb |
Jquery form | 2,920 Kb |
D3 test | 2,395 Kb |
Responsive Calendar | 2,460 Kb |
JQuery Animations | 3,190 Kb |
A Pen by Rob | 1,972 Kb |
Site Layout | 3,219 Kb |
Html5 form validation | 2,090 Kb |
Table filters | 1,727 Kb |
Filter inputs | 1,721 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!