Develop Reference

How to image swap using forms and javascript

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

Meteor reactive-var update one select element based on choice in other select element

I have two different select elements in a form
When I select an option in the first list, I want a corresponding option to be automatically set in the second list. I have made a few attempts, and I am close to getting it working using reactive-var but I need some help.
My template looks like this
<template name="inputForm">
<div class="section">
<form action="#">
<div class="row">
<div class="input-field col m4">
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 1</label>
</div>
{{{secondListVar}}}
</div>
</form>
</div>
</template>
Then in the template helper file I have
var secondListVar = new ReactiveVar("<div class='input-field col m4'><select id='list-two'><option value='' selected>Choose your option</option></select><label>Select List 2</label></div>");
Template.inputForm.helpers({
secondListVar: function() {
return secondListVar.get();
}
});
Template.inputForm.events({
'change #list-one' : function() {
var listOneChoice = $('#list-one option:selected').text();
switch (listOneChoice) {
case "100":
secondListVar.set("<div class='input-field col m4'><select id='list-two'><option value='' selected>1.5</option></select><label>Select List 2</label></div>");
break;
case "75":
break;
case "50":
break;
case "25":
break;
case "25":
break;
}
}
});
If I select an option from the 1st list, the 2nd list seems to get cleared
but then if I click a radio button that causes the template to be hidden/shown I get this
So I have two issues
The rendering doesn't seem to be dynamic, in that I need to manually force it
When I get the 2nd list option shown, the corresponding state of the 1st list is lost

I would suggest creating the second list as html, and set its selection inside an autorun if you want to use a ReactiveVar.
Here's a working example :
http://meteorpad.com/pad/JLkM8ftKQuKhBvF3r/Lists
<template name="Main">
<label>Select List 1</label>
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 2</label>
<select id="list-two">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
</template>
var SelectedItem = new ReactiveVar();
Template.Main.events({
'change #list-one' : function() {
var selected = $('#list-one option:selected').val();
SelectedItem.set(selected);
}
});
Template.Main.onCreated(function(){
this.autorun(function(){
var selected = SelectedItem.get();
$('#list-two option').eq(selected).prop('selected', true);
});
})
However, you may not even need a ReactiveVar, in this case you can set the second list directly via jquery if you wanted.

#looshi answer is the correct one, but I was also encountering issues due to the materialize package which are now sorted in my meteorpad example in light of the workaround posted here

I'm having a similar problem using Materialize. Your form select dropdowns are being created by Materialize based on values when the page is originally rendered. You will need to rerun the initialization code each time:
$('select').material_select();
Here's an example based on taking values from iron routers data function:
Tracker.autorun(function(e){
var data = Router.current().data();
Tracker.afterFlush(function(){
//dom is now created.
$('select').material_select();
});
});

Database value cannot get it to the Dropdownlist jQuery

In my database there's a column, name is Sequence & it consist of numbers(int). In my application's edit function I need to show that selected number in my jQuery dropdown list.
In my AJAX call I sent ProductId and get the specific row.
Html Control
<select class="form-control" id="drpsequence"></select>
My jQuery dropdown
$("#drpsequence option:selected").append($("<option></option>").val(msg._prodlng[0].Sequence).text(msg._prodlng[0].Sequence));
In the above code msg._prodlng[0].Sequence comes as selected number

I'm not sure what you are trying to do but it looks like you are adding an <option> tag into another <option> tag which is most likely not what you want.

If the returned value already exists as a selected option:
$("#drpsequence").val(msg._prodlng[0].Sequence).prop('selected', true);
Or, if you need to add an option:
var opt = $("<option>")
.val(msg._prodlng[0].Sequence)
.text(msg._prodlng[0].Sequence);
$("#drpsequence").append(opt);
Snippet example:
// foo --> select
$('#foo').val('baz').prop('selected', true);
$('#bim').click(function(){
$('#foo').append('<option id="boop" value="boop">boop</option>'); //<-- or loaded value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
<option>-- select --</option>
<option id="bar" value="bar">bar</option>
<option id="baz" value="baz">baz</option>
</select>
<button id="bim">Add an option</button>

You need to do one of following.
Either find that option and make that selected = true like this.
$("#sel option").each(function(i) {
if ($(this).val() == "Orange") $(this).attr("selected", "true");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>
Or if that option is not found then add and make that selected = true.
Like the one, which you had in your question.

Form select not saving in localStorage

I'm working on an HTML view for iAd Producer. I'm trying to add a list of sentences which have alternative words students can choose and to save those values to localStorage as they change and repopulate the selects with those values when the page is revisited.
I'm adapting some code I wrote which works fine to save multiple input boxes on a page. But I have strange behaviour when trying to use it with multiple selects. Basically, no matter which order the answers are completed in, only the last chosen value is being stored. When the page is revisited, the code attempts to put that value in each select. This, of course, fails for the two selects which do not have corresponding values.
I cannot see why this is happening and hope someone can spot the obvious. Thanks.
<div>
<script type="text/javascript">
var uniqueId = "FC2-U2-A-P29";
$(document).ready(function () {
function onStartup() {
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) {
$(this).val(localStorage[$(this).attr("value")+uniqueId]);
}
});
}
onStartup();
});
$('.drop').change(function () {
localStorage[$(this).attr("value")+uniqueId] = $(this).val();
});
</script>
<form>
<label class="number">1.</label>
<label class="text">Breakfast is the </label>
<select name="select1" class="drop">
<option value="blank">Choose a word</option>
<option value="one1">one</option>
<option value="first1">first</option>
</select>
<label class="text"> meal of the day.</label>
<br>
<label class="number">2.</label>
<label class="text">I always eat </label>
<select name="select2" class="drop">
<option value="blank">Choose a word</option>
<option value="three2">three</option>
<option value="third2">third</option>
</select>
<label class="text"> meals a day.</label>
<br>
<label class="number">3.</label>
<label name="select3" class="text">My football team is in</label>
<select class="drop">
<option value="blank">Choose a word</option>
<option value="two3">two</option>
<option value="second3">second</option>
</select>
<label class="text"> place in the league.</label>
<br>
<button class="clearButton" onclick="clearAnswers()">Clear </button>
<script type="text/javascript">
function clearAnswers() {
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) {
localStorage.removeItem($(this).attr("value")+uniqueId);
$(this).val("blank");
}
location.reload();
});
}
</script>
</form>
</div>

The probable reason for which this code fails in select is because of the following :
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) { //select doesn't have any attribute value.
$(this).val(localStorage[$(this).attr("value")+uniqueId]);
}
});
Select tag doesn't have any value attribute. I think .val() is what you need here. If you look at the code, you are basically iterating on select tag and checking value attribute(which doesn't exist) of select. Try changing it to .val() and then try.

To save and load stuff from localstorage use:
localStorage.setItem(<key>, <value>);
and
localStorage.getItem(<key>);

There are multiple problems with your code.
The first one is that you should use .val() instead of .attr('value').
The second one is that the code to add the values in localStorage is executed before the DOM is created fully, so the selects dont exist yet. To overcome this you need to bind the change event on document.ready ( aka $(function() { }); ).
I've made a pastebin with the modified code: http://jsbin.com/jubijuyatu/2/

Your selector is invalid.
Change $(this).attr("value")+uniqueId with $("option:selected",this ).text()+uniqueId; in all occurrences.

Write character to div using drop down list java/html/css

Please excuse my complete lack of knowledge I am very new to all this. I have found some code on here that does kind of what I want so am trying to adapt it. Basically I need to show a character on the screen and then change that character using a drop down list
Heres the HTML
<div style = "position: absolute; left: 320; top: 700;" class = "dropdown-menu- portfolio" >
<select id="category-navbar" name="category-navbar" style="width: 131px;">
<option value="1">motif 1</option>
<option value="2">motif 2</option>
<option value="3">motif 3</option>
</select>
And the Java script
<script>
$(".category-navbar value value").click(function() {
// Modifying the label
$('div.dropdown-menu-portfolio label').text($(this).text());
// Removing the class 'select' to the item previously selected
$('option.select').removeClass('select');
// Giving the class 'select' to the item currently selected
$(this).parent().addClass('select');
});
</script>
I have been struggling for a couple of weeks with this on and off and really want to get it cracked. Any help would be massively appreciated!

I'm not 100% sure, but i think this is what you're looking for:
$(document.body).on('change', 'select#category-navbar', function() {
$('.selected-value').text($(this).val());
});
So when you change an option in the dropdown, it will write the selected option value inside the .selected-value div. Demo: http://jsfiddle.net/qp2b9Lof/

You have some errors in your code for example with this:
$(".category-navbar value value").click(function() {
you don't select anything it must be:
$("#category-navbar").change(function() {
Notice the "#" sign, it selects by ID and second you must use change event
Check JSFiddle for full code
http://jsfiddle.net/qm0msyhf/

Try this
<div class = "dropdown-menu-portfolio" ></div>
<select id="category-navbar" name="category-navbar" style="width: 131px;">
<option value="1">motif 1</option>
<option value="2">motif 2</option>
<option value="3">motif 3</option>
</select>
javascript:
$("#category-navbar").change(function(){
$(".dropdown-menu-portfolio").html($(this).val());
});
click here to see demo - http://jsfiddle.net/1wrt94fc/