So I'm trying to make a image swapping code using a form with 2 drop-down options.
Its for color options for a item call it a widget, a exterior and interior color. I've been scratching my head on approaching this and made this code.
Here is my HTML
<img id="Imageholder" src="../images/placeholder.jpg" />
<form>
Interior Color:
<select name="covers">
<option value="or1">Orange</option>
<option value="be1">Blue</option>
<option value="rd1">Red</option>
<option value="bk1">Black</option>
<option value="gm1">GunMetal</option>
</select>
<p>Exterior Color:
<select name="wheels">
<option value="or2">Orange</option>
<option value="be2">Blue</option>
<option value="rd2">Red</option>
<option value="bk2">Black</option>
<option value="gm2">GunMetal</option>
</select></p>
<button onclick="function(Imagechange)">Change</button>
</form>
and here is my JS
// Place Holder
var Pholder = document.getElementById("Imageholder");
// The List
var Imglist = [
"Http://../images/imageOrOr.jpg,
Http://../images/imageOrBe.jpg,
Http://../images/imageOrRd.jpg,"
];
// List Values
var covers, wheels;
// Interior Variables
var be1, rd1, bk1, gm1, or1;
// Exterior Variables
var be2, rd2, bk2, gm2, or2;
function Imagechange () {
switch (covers,wheels) {
case 0:
if (covers = or1, wheels = or2) {
Document.getElementbyId(Pholder) == Imglist[0];
}
break;
case 1:
if (covers = or1, wheels = be2) {
Document.getElementbyId(Pholder) == Imglist[1];
}
break;
case 2:
break;
}
}
Not the whole thing but I think this should be enough to get what I'm trying to do.
Unfortunately doesn't work with the proper links and everything so I'm not sure what is wrong.
Ultimately I want is when people pick the 2 options and click the button the image will appear above it, and when changing options and click again change the picture to the options they selected.
My knowledge of JavaScript is limited and equally the same with jquery but any ways to make this work or a better way would help me.
Just so I have the idea right, depending on the combination of options selected, an appropriate image should replace the current image in the "Imageholder" Right??
If so, the code below should prove helpful for you. I didn't do all of the options, but you should get the idea. So when orange is selected in both select boxes and the button is clicked, the image will change to the desired image. You can then propagate this idea through all the combos, and have them switch out the image depending on the combo selected. You will need to include the jQuery library in your code to be able to use this.
I have put a jsFiddle link on the bottom that you can check out. Good luck!
<img id="Imageholder" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="300" height="300"/>
<form>
Interior Color:
<select name="covers" id="covers">
<option value="or1">Orange</option>
<option value="be1">Blue</option>
<option value="rd1">Red</option>
<option value="bk1">Black</option>
<option value="gm1">GunMetal</option>
</select>
<p>Exterior Color:
<select name="wheels" id="wheels">
<option value="or2">Orange</option>
<option value="be2">Blue</option>
<option value="rd2">Red</option>
<option value="bk2">Black</option>
<option value="gm2">GunMetal</option>
</select></p>
<button id="changeBtn">Change</button>
</form>
JS:
$(function() {
$('#changeBtn').click(function( e ){
e.preventDefault();
var newImage = 'http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg'
if(($('#covers').val() == 'or1') && ($('#wheels').val() == 'or2')){
$('img').attr('src', newImage);
}
else {
alert('error')
}
});
});
JSFiddle Link
Related
I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true
To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>
document.getElementById("country").selectedIndex = 2;
I am currently using dreamweaver and I am trying to build a simple translator function. I have a drop down with multiple options (each language designated by specialized id's) and I want the user to select the language of choice and have the chosen HTML string translated. So far I have tried everything and I can't seem to get this to work, and this I thought would be the simplest way. Any thoughts or edits would be huge help. p.s. I'm a total beginner
JQuery:
$("#French").click(function(){
$("#AppartmentB").replaceWith("maison");
});
HTML:
<select name="selectmenu" id="selectmenu">
<option value="option1" id="English">English</option>
<option value="option2" id="French">French</option>
</select>
<div data-role="page" id="AppartmentPage" class="page">
<h1 class="TopText" align="center" id="AppartmentT">Appartment</h1>
<h1 class="BotText" align="center" id="AppartmentB">Appartment</h1>
</div>
I put together a basic example. Essentially, the JS has a database of translations. I've only put in one item with 1 key, text. The JS listens for any changes to the language select dropdown menu.
This is essentially how many localization libraries work. Check out jquery-localize if you want to implement something more robust.
// Translation database
var translations = {
'en': {
'text': 'Apartment'
},
'fr': {
'text': 'Maison'
}
}
// Li
$("#languageSelect").change(function() {
var str = '';
$("#languageSelect option:selected").each(function() {
var langCode = $(this).val();
str += translations[langCode]['text'];
});
$("#translatedText").text(str);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="languageSelect">
<option value="en" selected="selected">English</option>
<option value="fr">French</option>
</select>
<div data-role="page" id="AppartmentPage" class="page">
<h1 id="translatedText">Apartment</h1>
</div>
You're replacing the whole matched tag instead of its contents, and you can't listen to a click event on a select option.
Try to listen to the change event of your select element, and use the languages as option values.
HTML:
<select name="selectmenu" id="selectmenu">
<option value="english">English</option>
<option value="french">French</option>
</select>
JS:
$("#selectmenu").on('change', function() {
var chosenLanguage = $(this).val();
switch (chosenLanguage) {
case 'french':
$('#AppartmentB').text('Maison');
break;
case 'english':
$('#AppartmentB').text('Appartment');
break;
}
});
See a full working example here: https://jsfiddle.net/r76hLLte/
First off sorry for a re-post, I voted to delete my old post because I'm asking for help on the code now, not just which way is the better route. Any my code has changed several times
On my page there is a drop down to select a country, dynamically loaded from a db. Once the user selects a country two things can happen. 1) If they select Canada or the US a second drop-down appears and the user can select a region. 2) If the user selects any other country it creates an input box so that the user can type the region instead. This all works fine.
Now there is a third input which takes the province/state value so it can be posted. There are only two of us who will use this form so I'm not worried about JavaScript being turned off in the browser.
My issue is that when the user first selects the Canada/US and a region, nothing is filled into the third input unless they change the country selection. However, if they select a country other than Canada/US and have to type the region, it works as expected.
Here is an example of the issue: http://jsfiddle.net/owalsh/BQXZA/3/
If anyone can tell me why I'd appreciate it, thanks
Working here: http://jsfiddle.net/5A4v4/11/
HTML:
<form id="customer_bill_add_post" name="customer_bill_add_post">
<select id="country" name="country">
<option value="0">Select a country</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
<option value="OT">Other</option>
</select>
<select id="province_select" name="province_select">
<option value="0">Select a Province</option>
<option value="AB">Alberta</option>
<option value="AL">Alabama</option>
</select>
<input type="text" id="province_input" name="province_input">
<input type="text" id="province" name="province" />
</form>
Jquery: code (there was some extra change event binding going on) you can prettify it.
$(function(){
//initially hide the textbox
$("#province_input").hide();
$("#province_select").hide();
$('#country').change(function() {
if($(this).find('option:selected').val() == "CA"){
$("#province_select").show();
$("#province_input").hide();
} else if($(this).find('option:selected').val() == "US"){
$("#province_select").show();
$("#province_input").hide();
} else {
$("#province_input").show();
$("#province_select").hide();
}
});
$('#country, #province_select, #province_input').bind("change", function() {
if($('#country').find('option:selected').val() == "CA"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else if($('#country').find('option:selected').val() == "US"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else {
//alert('foo');
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_input.value;
}
});
});
Cheers,
I have three select boxes, that the user would choose in terms of priority. I have used sport for this example. At present I've set the css to hide the 2nd and 3rd priority selects until the first box has been completed and so on.
The issue I have is that as the values are all duplicate, i'd like to disable selection, IE. If a user selects "Golf", then this should be disabled in priority2, and priority3. In addition if a user selects "Football" for priority2 then both "Golf" and "Football" should be disabled.
HTML:
<form>
<table>
<tr><td>
<label for="Priority">Please state your priorities</label></td><td>1st PRIORITY
<select class="formSelect" name="priority1" onChange="p1(priority1);" onClick="p1(priority1);" width="175px" id="priority1" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>2nd PRIORITY
<select name="priority2" class="chidden" onChange="p2(priority2);" onClick="p2(priority2);" width="175px" id="priority2" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>3rd PRIORITY
<select name="priority3" class="chidden" width="175px" id="priority3" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
</tr>
</table></form>
CSS:
.chidden {visibility: hidden;}
.cvisible {visibility: visible;}
Javascript:
var priority1 = document.getElementById("priority1");
var priority2 = document.getElementById("priority2");
var priority3 = document.getElementById("priority3");
function p1(priority1) {
if(document.getElementById("priority1").selectedIndex > 0){
document.getElementById("priority2").className="cvisible";
}
else{
document.getElementById("priority2").className="chidden";
document.getElementById("priority2")[0].selected = "1";
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
function p2(priority2) {
if(document.getElementById("priority2").selectedIndex > 0){
document.getElementById("priority3").className="cvisible";
}
else{
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
Apologies for the quality of code, its only a start at the moment. I have tried to use the following to disable selection but not sure how to implement it. I would be grateful for any help with this (in Javascript);
//for (var i=0; i< document.getElementById("priority2").length; i++){
//if(document.getElementById("priority1").selectedIndex == document.getElementById("priority2")[i]){
// document.getElementById("priority2")[i].disabled = true;
//}
//}
If you have the all select boxes with same class name and calling a function
onchange=sel_box(this.value) you can use following
$('.chidden option[value="'+opt+'"]').attr("disabled", true);
here opt is option that you passed to sel_box() function
I don't think you can set options as visible/hidden in css, but you can disable them.
See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled
EDIT
100% wasn't questioning that. Was only concerned about your method of hiding/showing.
This should do what you're looking for
http://jsfiddle.net/RaBuQ/1/
Actually just realized there is a bug. See if you can get it. If not I'll update in a bit.
EDIT 2
This should get you what you need. http://jsfiddle.net/RaBuQ/5/
EDIT 3
This isn't pure javascript (still jQuery), but I wanted the answer to be complete to your spec. If I have time, I may re-visit with a pure javascript answer, but don't wait for me. If you get it working, make sure you post the answer to your own question. Good luck!
http://jsfiddle.net/RaBuQ/8/
Actually I have a select dropdown. On the select of every option, I need to load an image(Say in a Div). How do I accomplish this is jquery.
I tried something here:
http://jsfiddle.net/refhat/T65Lx/2/
My other two images are here:
http://www.google.com/doodle4google/2010/images/doodle-holiday.gif
http://www.google.com/doodle4google/2010/images/doodle-popeye.gif
UPDATE 1:
My question is something like this.
jQuery add image inside of div tag
UPDATE 2
#JellyBelly: No offence, In deed this is a good answer so far, But It has quite a few bugs, First after selecting some image in the dropdown and then if you go back to first select with value="", It shows some non existing image(Actually this doesn't exist.) (Screen Shot Atached)
2: If you were in the page and had selected say 2nd Image and then if you refresh, It doesn't reset the image, rather shows that Image for first option of select.the scripts crashes, It doesn't load anything. I think this is because we are just doing this on DOM ready.
THANKS
try this: http://jsfiddle.net/JellyBelly/T65Lx/10/
HTML
<select id="sel">
<option value="">Please Select the Logo</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif">Logo 1</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 2</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 3</option>
</select>
<div style="height:200px; width:250px;border:1px solid red;"><img id="swapImg" src="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif"></div>
JS
$(document).ready(function() {
$("#sel").change(function() {
var imgUrl = $(this).val();
$("#swapImg").attr("src", imgUrl);
});
});
You EDIT Question and I edit my Answer
If I understand correctly, you have the initial state and an empty div in the first selection you want to hang a picture and subsequent selections you want to replace the image right?
If so 'it was, here's how you do:
HTML:
<select id="sel">
<option value="">Please Select the Logo</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 1</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 2</option>
</select>
<div id="swap" style="height:200px; width:250px;border:1px solid red;">
<input type="hidden" id="state" name="state" value="noImage"/>
</div>
JS
$(document).ready(function() {
$("#sel").live("change", function() {
if ($("#state").val() == "noImage") {
$("#swap").append(
"<img id='swapImg' src='" + $(this).val() + "'>"
);
$("#state").val('image')
} else {
$("#swapImg").attr("src", $(this).val());
}
});
});
demo: http://jsfiddle.net/JellyBelly/T65Lx/23/
If the image is dependant on the option that's selected, I would take the following approach:
HTML:
<select id="sel">
<option value="">Please Select the Logo</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 1</option>
<option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 2</option>
...
</select>
<div style="height:200px; width:250px;border:1px solid red;">
<img id="myImage" src="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif">
</div>
JavaScript:
//Bind to change event of select and update image based on option value.
$("#sel").change(function() {
$("#myImage").attr("src", $(this).val());
});
Here's a working jsFiddle.
Pretty straight forward: http://jsfiddle.net/T65Lx/4/
$(document).ready(function() {
$("#sel").change(function() {
$("#swap").attr("src", "http://www.google.com/doodle4google/2010/images/doodle-holiday.gif");
});
});
Or do swap the image out based on the item selected:
http://jsfiddle.net/T65Lx/5/
And if you want to get fancy, preload those puppies outside your document ready:
(function(){
var preLoadImg1 = new Image();
preLoadImg1.src = "http://www.google.com/doodle4google/2010/images/doodle-holiday.gif";
var preLoadImg2 = new Image();
preLoadImg2.src = "http://www.google.com/doodle4google/2010/images/doodle-popeye.gif";
})();
To insert an image into your div:
$("#myDivId").append("<img src='whatever.gif'/>");