Не удается получить изображение для отображения изображений, когда выбрана опция из выпадающего меню?

Question

У меня есть выпадающий список на моем веб-сайте, где пользователи могут выбрать способ оплаты. Я хочу, чтобы изображение отображалось справа от параметра, выбранного пользователем.

Я попытался использовать приведенный ниже код. Этот код был взят из этой темы: Поле выбора jQuery onchange / onfocus для отображения изображения?

Ссылка JS fiddle: https://jsfiddle.net/lindychen/102fmpu8/1/

HTML-код

  <select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
    <option value=""></option>
    <option value="https://i.imgur.com/4vRsaJa.png">Paypal</option>
    <option value="https://i.imgur.com/ZPC09qT.png">Credit Card</option>
  </select>
</div>

Jquery code

    $("form-field-field_5").change(function() {
        var src = $(this).val();

        $("#form-field-field_5").html(src ? "<img src='" + src + "'>" : "");
    });
});

Это ожидаемый результат:

Однако в настоящее время я не вижу изображения, появляющиеся направо на текст. К сожалению, я не могу изменить используемый HTML-код. Спасибо.

Answer 1

Как это? Вы не можете добавить изображение в выпадающий список без создания собственного виджета

$("#form-field-field_5")
 .after('<span id="img"></span>')
 .change(function() {
  var src = $(this).val();
  $(this).next().html(src ? `<img src="${src}" >` : "");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
  <option value=""></option>
  <option value="https://i.imgur.com/4vRsaJa.png">Paypal</option>
  <option value="https://i.imgur.com/ZPC09qT.png">Credit Card</option>
</select>