如何从选择表单中获取数据-img-src的实时预览?

Question

tl;博士

我有一个包含 png 符号名称的下拉列表，并希望在用户点击"提交"之前在下拉菜单旁边提供图像外观的实时预览。

更详细的信息：

我有一个传单.js地图，用户可以在其中放置标记。当用户这样做时，将打开一个弹出窗口，可以在其中选择标记的符号。这是下拉菜单所在的位置，当然，预览该符号会很好。特别是因为有不少。

最初，我想有一个表情符号选择器风格的菜单，其中包含不同类别符号的不同选项卡。唉，我几乎没有找到任何库/代码片段，因为我不想插入 unicode 笑脸，而是插入 png 符号。我找到的是onesignal表情符号选择器和jquery.emojiarea插件。但我没能让他们工作。很可能是因为我是JavaScript初学者。

然后我试图回退到 rveras 图像选择器以获得一种更简单但希望更容易实现的方法，但也未能让它工作。

现在我想，也许这是一种简单、纯粹的 jquery 方式，只需在下拉列表旁边预览 png？

所以你看，我的问题实际上是三方面的：

1. 有谁知道有关如何获得表情符号选择器的傻瓜教程 样式菜单以使用 PNG 符号？或。。。
2. 任何人都可以展示如何让图像选择器工作吗？或。。
3. 你能告诉我如何使用vanilla jquery或javascript做到这一点吗？

一个问题可能是我在只允许 html 作为内容的传单弹出窗口中操作，所以我的代码看起来像这样：

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);
})

如果你想看到传单地图的整个代码，我在哪里尝试这个，看这里。警告！可能很乱...

PS：如果您想查看问题的实际效果，请转到 fictionalmaps.com，创建一个免费帐户，然后点击用户控制中心的"创建地图"。

Answer 1

您可以使用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>

更新：如评论中所述，如果同一页面上有其他<select>，这会导致问题。此问题可以通过在change事件中通过id来定位<select>来解决，而不是将函数绑定到所有选择。此外，预览应该已经在页面加载时显示图像。这可以通过将第一个选项设置为selected并调用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>