时间戳

首页 > 解决方案 > 如何从选择表单中获取 data-img-src 的实时预览？

javascript - 如何从选择表单中获取 data-img-src 的实时预览？

问题描述

tl;博士

我有一个包含 png 符号名称的下拉列表，并希望在用户点击“提交”之前在下拉列表旁边显示图像的实时预览。

更详细的信息：

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

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

然后我尝试回退到 rveras 图像选择器，以寻求一种更简单但希望更容易实现的方式，但也未能使其正常工作。

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

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

  1. 有谁知道关于如何让表情符号选择器样式菜单与 png 符号一起使用的傻瓜教程？或者...
  2. 谁能展示如何让图像选择器工作？或者 ..
  3. 你能告诉我如何用香草 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，创建一个免费帐户并在用户控制中心点击“创建地图”。

标签： javascripthtmljquery

解决方案

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

推荐阅读