如何根据所选选项显示图像

Posted 2021-05-05

我正在尝试根据用户选择显示图像。

这是contentType表

id | Type | Image |

从while语句中检索选项，如下所示：

   <select style="cursor:pointer;" id="contentMarketingTypeSelector" name="contentMarketingType" class="form-control contentMarketingType">
<option>Please select content type</option>';
        while($ctype = $resultstmt_uppt->fetch_assoc()){
        $socialmediaform .= '<option id="'.$ctype['Type'].'">'.$ctype['Type'].'</option>';
          }
</select>

我想在外面显示图像，如下所示：

<div class='contentImageType'></div>

我用jQuery开始了

 $(function() {
                $('#contentMarketingTypeSelector').change(function(){


                });
            });

我从这里有点失落......你能帮忙吗？谢谢

答案

一个快速而简单的jQuery解决方案。将值设置为<option>，将id设置为<select>。

html

 <div class='contentImageType'>
<img style="max-width:100% !important;" class="responsive" src="" name="image-swap">
</div>

腓

  <select style="cursor:pointer;" id="contentMarketingTypeSelector" name="contentMarketingType" class="form-control contentMarketingType">
<option>Please select content type</option>';
        while($ctype = $resultstmt_uppt->fetch_assoc()){
        $socialmediaform .= '<option value="'.$ctype['Image'].'">'.$ctype['Type'].'</option>';
          }
</select>

JS

$(function() {
                $('#contentMarketingTypeSelector').change(function(){

                  $("img[name=image-swap]").attr("src",$(this).val());

                });
            });

另一答案

你可以从Select2插件获得帮助

https://select2.org/dropdown