How to show an image while we select the option below.
Example : -
<select name="payment">
<option value="">Please Select</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>
<div id="payment"><img src="paypal.gif" alt="paypal" /></div>
If we select paypal on div id="payment" will show the logo paypal and if bank will show bank logo.
Can be done with jquery? let me know.
Assumption: your bank logo is called bank.gif.
EDIT: added code to check for blank value.
$('select[name=payment]').change(function() {
var val = $(this).val();
$('div#payment img')
.attr('src', val + '.gif')
.css('display', val.length ? 'block' : 'none');
});
Doh, misread the question, updated:
You can do this with just a small event handler, like this:
$(function() {
$("select[name=payment]").bind("change", function() {
$("#payment img").attr('src', $(this).val().toLowerCase() + ".gif");
}).change();
});
This approach adjusts the src of the image based on the current selected value. Also, we're triggering the event one time on document.ready to make the initial hide/show state match the dropdown.
You'll need to hide the paypal.gif first
<select name="payment">
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>
<div id="payment"><img src="paypal.gif' alt="paypal' /></div>
Then bind a change handler to the select.
<script>
var images = {
'Paypal': 'paypal.gif',
'Bank': 'bankLogo.gif'
};
$("select").bind("change",function(){
$("div#payment img:first").attr('src', images[$("select :selected").val()] );
});
</script>
Related
i have a drop-down that has values which are exceeding the current div's width. i want to show only a part of the text when that option is selected. i tried extending the width but the form structure is getting messed up.
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
how can i achieve this using jQuery ?
the expected output is that when the option $2.00/month(12 months) is selected it shows as $2.00/month in the drop-down.
The solution comes with the onchange and onmousedown event. Using jQuery's selectors we can get the selected option and change its display HTML.
//you really don't need jQuery, but we can wrap it in there.
//wrap in ready function to make sure page is loaded
$(document).ready(function() {
$("select#g-suite-pac-id").on("change", function() {
var text = $(this).children("option").filter(":selected").text()
var edited = text.match(/^.+?\/month/); //use regex | ^ start, .+? lazy search for everything until /month
//save
$(this).children("option").filter(":selected").data("save", text);
//change
$(this).children("option").filter(":selected").text(edited);
});
$("select#g-suite-pac-id").on("mousedown", function(e) {
//restore a saved value
var selected = $(this).children("option").filter(":selected");
if (selected.length > 0)
{
if (selected.data("save"))
{
selected.text(selected.data("save"));
selected.removeData("save");
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
Set width of select component to any fixed width like below:
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package" style="width:96px">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)dffsdfsdfdsfsdfdsfdsfsd</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
try above code, it shows text that can fit in 96px width.
I have the following form:
var x = document.getElementById("submit-button");
if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option disabled selected>Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.
Any help will be appreciated.
You are in the right way. But missing some points with events:
1 - The whole code must be executed when DOM is ready (document loaded)
2 - You must observe the select change event to check for changes
3 - You can use jQuery .hide() and .show() do control the element's visibility
// Executed when DOM is loaded
$(document).ready(function() {
// Executed when select is changed
$("select").on('change',function() {
var x = this.selectedIndex;
if (x == "") {
$("#submit-button").hide();
} else {
$("#submit-button").show();
}
});
// It must not be visible at first time
$("#submit-button").css("display","none");
});
Look this working fiddle
The shortest way would be
$(function(){
$("select").on("change", function(){
$("#submit-button").toggle(!!this.value);
}).change();
});
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.
I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.
$("#submit-button").hide();
$("select").on("change", function() {
if (this.value)
$("#submit-button").show();
else
$("#submit-button").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You should add a listener to your select like this:
$('form select').on('change', function(){
if($(this).val() == null){
$("#submit-button").hide();
}else{
$("#submit-button").show();
}
}).change();
It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.
Hi there Kindly try the following solution and tell me if you wanted something like this :
$(document).ready(function(){
if($('select').val() == null){
$('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});
I am using the following code to display div's according to the select option in the HTML using jquery. this works fine.
however, I need to know how I can display both of them if the option front an back is selected?
here is my current code:
JS:
<script language="javascript">
$(function() {
$('#Field169').change(function(){
$('.myDivs').hide();
$('#' + $(this).val()).show();
});
});
</script>
html:
<div class="myDivs" id="Front" align="center>Front</div>
<div class="myDivs" id="Back" align="center>Back</div>
<select id="Field169">
<option value="WHAT DO I NEED HERE??">Front and Back</option>
<option value="Front">Front Only</option>
<option value="Back">Back Only</option>
</select>
<option value="Front, #Back">Front and Back</option>
You can't do it if you're referencing by IDs, but if you gave them classes with those same names instead, and your option values looked like .front and .back then your combined option could have the value value=".front, .back" and the selector would get both of them. You would want to change the function to look like:
$($(this).val()).show();
rather than selecting by ID
You could leave the value blank and then change your jquery:
$('#Field169').change(function(){
var selectedValue = $(this).val();
if (selectedValue === '') {
$('.myDivs').show();
} else {
$('.myDivs').hide();
$('#' + selectedValue).show();
}
});
Example
$('#Field169').change(function(){
var getvalue=$(this option: selected).text();
if(getvalue=='Front and Back')
{
$('#front').show();
$('#back').show();
}
});
How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
Here: http://jsfiddle.net/Kq9pX/
JS
Do it on load: Wrap around document.ready function.
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
<option value="All">All</option>
Must be cleared:
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
Use jQuery:
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.