Develop Reference

How to get a live preview of data-img-src from a select form?

tl;dr
I have a dropdown list with the names of png symbols and would like to present a live preview of what the image looks like next to the dropdown before the user hits 'submit'.
More detailed information:
I have a leaflet.js map where the user can place markers. When the user does, a popup opens where a symbol for the marker can be choosen. This is where the dropdown menu sits and of course it would be nice to have a preview of the symbol. Especially as there are quite a few.
Initially I wanted to have an emoji-picker-style menu with different tabs for different categories of symbols. Alas, I hardly managed to find any libraries/code snippets as I do not want to insert unicode smileys but png symbols. What I did find was the onesignal emoji-picker and the jquery.emojiarea plugin. But I failed to get them to work. Most likely because I'm a javascript beginner.
Then I tried to fall back to rveras image-picker for a simpler but hopefully easier to implement way, but also failed at getting it to work.
Now I think, maybe the is a simple, pure jquery way of doing just a preview of the png next to a dropdown?
So you see, my question is actually three-fold:
Does anyone know a tutorial for dummies on how to get a emoji-picker
style menu to work with png symbols? Or...
Can anyone show how to get the image-picker to work? Or ..
Can you tell me how I do this with vanilla jquery or javascript?
A problem might be that I'm operating within a leaflet popup that only allows html as content, so my code looks something like this:
map.on('draw:created', function (event) {
layer = event.layer,
feature = layer.feature = layer.feature || {}; // Intialize layer.feature
feature.type = feature.type || "Feature"; // Intialize feature.type
props = feature.properties = feature.properties || {}; // Intialize feature.properties
props.name = "my name";
props.description = "my content";
props.icon = "my icon";
//picker() //execute image picker
var editablePopup = L.popup();
var content = //Textfield for the marker name
'<span><b>Enter the name</b></span><br/><input id="shapeName" type="text"/><br/><br/>' +
//Dropdown to choose the icon
'<span><b>Choose an icon</b></span></br>'+
'<select id="shapeIcon" class="image-picker">'+
'<optgroup label="Cats">'+
'<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>'+
'<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>'+
'<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>'+
'<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>'+
'</optgroup>'+
'<optgroup label="Animals">'+
'<option data-img-src="http://lorempixel.com/220/200/animals/" value="5">Animal 1</option>'+
'<option data-img-src="http://lorempixel.com/180/200/animals/" value="6">Animal 2</option>'+
'<option data-img-src="http://lorempixel.com/130/200/animals/" value="7">Animal 3</option>'+
'<option data-img-src="http://lorempixel.com/270/200/animals/" value="8">Animal 4</option>'+
'</optgroup></select></br>'+
//Textarea (flexible in size as opposed to textfield) for the general description
'<span><b>Enter a description<b/></span><br/><textarea id="shapeDesc" cols="25" rows="5"></textarea><br/><br/>'+
//Save Button that call the saveIdIW functions
'<input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
editablePopup.setContent(content);
editablePopup.setLatLng(layer.getLatLng());
editablePopup.openOn(map);
drawnItems.addLayer(layer);
})
If you want to see the whole code of the leaflet map, where I try this, see here. Warning! It's likely quite messy...
PS: if you want to see the problem in action, go to fictionalmaps.com, make a free account and hit "create map" in the user control center.

You can do it like this using on():
$(document).ready( function() {
$(document).on("change", "select", function() {
let img = $(this).find("option:selected").attr("data-img-src");
$("#preview").empty().append("<image src=" + img + "/>");
});
});
#preview {
display:inline-block;
position:absolute;
margin-left:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="shapeIcon" class="image-picker">
<optgroup label="Cats">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</optgroup>
<optgroup label="Animals">
<option data-img-src="http://lorempixel.com/220/200/animals/" value="5">Animal 1</option>
<option data-img-src="http://lorempixel.com/180/200/animals/" value="6">Animal 2</option>
<option data-img-src="http://lorempixel.com/130/200/animals/" value="7">Animal 3</option>
<option data-img-src="http://lorempixel.com/270/200/animals/" value="8">Animal 4</option>
</optgroup>
</select>
<div id="preview">
</div>
Update: As mentioned in the comments, this lead to problems if there is another <select> on the same page. This issue can be solved by target the <select> by its id in the change event instead of binding the function to all selects. In addition, the preview should already display an image on pageload. This can be done by setting the first option as selected and call change().
$(document).ready(function() {
$(document).on("change", "#shapeIcon", function() {
let img = $(this).find("option:selected").attr("data-img-src");
$("#preview").empty().append("<image src=" + img + "/>");
});
$("#shapeIcon optgroup option:first").attr("selected", "selected");
$("#shapeIcon").change();
});
#preview {
display:inline-block;
position:absolute;
margin-left:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="shapeIcon" class="image-picker">
<optgroup label="Cats">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</optgroup>
<optgroup label="Animals">
<option data-img-src="http://lorempixel.com/220/200/animals/" value="5">Animal 1</option>
<option data-img-src="http://lorempixel.com/180/200/animals/" value="6">Animal 2</option>
<option data-img-src="http://lorempixel.com/130/200/animals/" value="7">Animal 3</option>
<option data-img-src="http://lorempixel.com/270/200/animals/" value="8">Animal 4</option>
</optgroup>
</select>
<div id="preview">
</div>

Stop dropdown from redirecting to homepage

sI am using the following code to remove text starting from the "+" character from dropdown menu choices:
$("select").each(function(){
var $wrapper=$(this);
var $options=$wrapper.find("option");
$(this).empty();
$options.each(function(index){
$wrapper.append(new Option($(this).text().split("+")[0]))
})
})
So if a menu original choices would be:
Audi
BMW
Mercedes + Trailer
The dropdown only shows:
Audi
BMW
Mercedes
THE PROBLEM:
I also have dropdowns that need to refresh the page when a choice is made. When not using the above code this works fine, but when adding the code above the webpage redirects to the homepage instead. How I can ensure that when the user makes a dropdown choice the user stays on the same page?

Following the jquery spirit "write less, do more" you could also do the text replacement operation like this:
$("select.cars option").each(function(){
with ($(this)) {
text(text().split("+")[0].trim());
val(val().split("+")[0].trim());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cars">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes + Trailer">Mercedes + Trailer</option>
</select>
To limit the effect of the script on the selects you want to change and protect all the others I also added the class "cars" into the picture. Maybe something along those lines can be helpful for your project?
But this will not touch your current problem, that you leave the current page as soon as a select option has been selected. I suspect there must be another piece of (as yet unpublished) script that is responsible for that behaviour.

You just need to add value to newly created option.
Try this:
$("select").each(function(){
var $wrapper=$(this);
var $options=$wrapper.find("option");
$(this).empty();
$options.each(function(index){
var text = $(this).text().split("+")[0].trim();
var newOption = new Option(text);
// get value from previous option
newOption.value= $(this).val();
$wrapper.append(newOption)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes + Trailer">Mercedes + Trailer</option>
</select>

So this works!
$("select option").each(function(){
with ($(this)) text(text().split("+")[0].trim());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cars">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes + Trailer">Mercedes + Trailer</option>
</select>

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

Option select to dynamically change next selection

I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>

Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});

have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());

How to remove/hide select options from select-list

I've got a select list like this:
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
</select>
Unfortunately I can't edit it.
Is there any method which let me hide the "Product 4" option by default?
I'm trying with CSS, but it doesn't work with IE.

To hide it, wrap it with a span tag.
$( "#selectlist option[value=4]" ).wrap( "<span>" );
To show it, unwrap the span tag if it has one.
if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
$( "#selectlist option[value=4]" ).unwrap();
}

using css to hide options is not supported in IE, so you need to update the options list itself.
Try something like
$('#selectlist option[value=4]').remove();
Demo: Fiddle
or if you want to enable it later
var sel = $('#selectlist');
var opts = sel.find('option');
$(':checkbox').click(function(){
sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()
Demo: Fiddle

You can hide option using following line include in scripting.
$("#selectlist option[value='4']").hide();
And if you want to again show this option use following line.
$("#selectlist option[value='4']").show();

To save your time, please read the following answer.
OK, I searched for a few hours and I noticed that there is NO WORKING WAY to "hide" (what I mean is make the option temporally disappeared from the drop-down list) for all browsers, such as set the visibility to be hidden or style="display: none".
My final approach is:
1. Create an array to store all the options for the dropdown list.
2. Use a method to dynamically update the drop-down list according what you want to be shown.
That's it, if you want to use a drop down list without using any library

You can "hide" the option by moving it to a hidden select element or cached document fragment, then move it back when you want to show it:
var selectTool = (function() {
var frag = document.createDocumentFragment();
return {
hideOpt: function (selectId, optIndex) {
var sel = document.getElementById(selectId);
var opt = sel && sel[optIndex];
console.log(opt);
if (opt) {
frag.appendChild(opt);
}
},
showOpt: function (selectId) {
var sel = document.getElementById(selectId);
var opt = frag.firstChild;
if (sel && opt) {
sel.appendChild(opt);
}
}
}
}());
Then you can hide the 4th option like:
<input type="button" value="Hide option" onclick="
selectTool.hideOpt('selectlist',4);
">
and show it again using:
<input type="button" value="Show option" onclick="
selectTool.showOpt('selectlist');
">
All play code of course, but you should get some ideas. If you want to store many options, you'll need a way of referencing them so maybe store them in an object with some form of referencing scheme.

Try to disable that option with disabled attribute.
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4" disabled="disabled">Product 4</option>
</select>
Check demo

see this link
http://jsfiddle.net/DKKMN/
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4" id="i">Product 4</option>
</select>
#i{display:none;}
create an id and in style make it invisble

I suppose you are using JQuery as well.
$("#selectlist option[value='option4']").remove();

to append the child below the list of option using java script.
`var option = document.createElement("option");
option.text = "All Users";
option.value = "all_user";
var select = document.getElementById("log_user_type");
select.appendChild(option);`

if you want to remove some option from select list you can use this code:
<script type="text/javascript">
$(window).bind("load", function() {
$('#select_list_id option[value="AB"],option[value="SK"]').remove();
});
</script>

<option value="4" style="display:none">Product 4</option>
hides the 4th option by default.