Блог

Главная - Вопросы по программированию - Изображения, НЕ работающие внутри выпадающего списка стран с помощью jQuery div

Изображения, НЕ работающие внутри выпадающего списка стран с помощью jQuery div

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Попытка добавить изображения слева от выпадающего списка стран

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

Вот код на данный момент, и я действительно ценю время, потраченное на чтение моего кода

 $(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("."   optionValue).hide();
                $("."   optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});  
 <style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .UnitedKingdom{ background: #ff0000; }
    .UnitedStates{ background: #228B22; }
    .EuropeanCountries{ background: #bbb; }
    .Afganistan{ background: #aaa; }
    .Albania{ background: #eee; }
</style>  
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <div>
        <select>
            <option>Choose Your Region</option>
            <option value="UnitedKingdom" data-image="/icons/icon_calendar.gif">United Kingdom</option>
            <option value="UnitedStates">
            <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
            United States</option>
            <option value="EuropeanCountries">European Countries</option>
            <option value="Afganistan">Afghanistan</option>
            <option value="Albania">Albania</option>
        </select>
    </div>
    
    

    <div class="UnitedKingdom box"><h1>You have selected <strong>red option</strong> so i am here</div>
    <div class="UnitedStates box">You have selected <strong>green option</strong> so i am here</div>
    <div class="EuropeanCountries box">You have selected <strong>blue option</strong> so i am here</div>
    <div class="Afganistan box">You have selected <strong>green option</strong> so i am here</div>
    <div class="Albania box">You have selected <strong>blue option</strong> so i am here</div>

Комментарии:

1. Изображения не разрешены options . Если вы когда-либо видели их, то вы видели, что select преобразуется в HTML, например, UL / LI или div и т. Д. При загрузке страницы, Где изображения разрешены.

2. Вы пытаетесь добавить изображения в divs? Потому что в вашем коде это не происходит.

3. Было бы хорошо, если бы я мог отображать изображения только в выпадающем меню, а не в самом теле, но если вы скажете, что это невозможно, тогда хорошо — что-то вроде этого я имел в виду — prnt.sc/v38y13 и если это можно сделать без текста, то все в порядке, и вместо этого просто отобразите изображениеСоединенного Королевства для примера.

4. Этот скриншот ссылается на плагин, который преобразует элементы select в HTML. Вы можете использовать этот плагин для этого. Почему вы не используете этот плагин? designwithpc.com/Plugins/ddSlick

5. Я пробовал, но я не был уверен, смогу ли я использовать свои собственные изображения или погоду, я был бы ограничен использованием библиотеки изображений из ddSlick

Ответ №1:

Вы не можете использовать тег изображения в теге option.

Если вы хотите отобразить изображение, попробуйте эту библиотеку.

https://github.com/marghoobsuleman/ms-Dropdown