วิธีเพิ่มภาพในรายการที่เลือก?

ฉันมีรายการเพศที่เลือก

รหัส:

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>  

ฉันต้องการใช้รูปภาพในรายการดรอปดาวน์เป็นดรอปดาวน์ไอคอน iconpeg

ฉันต้องการเพิ่มปุ่มแทนไอคอนดรอปดาวน์

ทำอย่างไร

ในFirefoxคุณสามารถเพิ่มภาพพื้นหลังไปยังตัวเลือก:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

ยังดีกว่าคุณสามารถแยก HTML และ CSS แบบนั้นได้

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

ในเบราว์เซอร์อื่น ๆวิธีเดียวในการทำที่จะใช้ห้องสมุดบาง JS เครื่องมืออย่างเช่นjQuery UIเช่นใช้เลือก

จาก jQuery UI 1.11 วิดเจ็ต Selectmenuสามารถใช้ได้ซึ่งใกล้เคียงกับสิ่งที่คุณต้องการ

ทางออกของฉันคือการใช้ FontAwesome แล้วเพิ่มรูปภาพห้องสมุดเป็นข้อความ! คุณแค่ต้องการ Unicodes และพวกมันอยู่ที่นี่: FontAwesome Reference file สำหรับ Unicode

นี่คือตัวกรองสถานะตัวอย่าง:

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

หมายเหตุตระกูลฟอนต์: Arial, FontAwesome; จะต้องได้รับมอบหมายในรูปแบบสำหรับการเลือกเช่นที่ระบุในตัวอย่าง!

คุณสามารถใช้ iconselect.js; เลือกไอคอน / ภาพ (คอมโบบ็อกซ์, ดรอปดาวน์)

การสาธิตและดาวน์โหลด http://bug7a.github.io/iconselect.js/

การใช้ HTML

<div id="my-icon-select"></div>

การใช้งาน Javascript;

    var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };

คุณมีคำตอบหลายข้อที่แนะนำให้ใช้ JavaScript / jQuery ฉันจะเพิ่มทางเลือกที่ใช้ HTML และ CSS เท่านั้นโดยไม่มี JS

แนวคิดพื้นฐานคือการใช้ชุดปุ่มและป้ายกำกับ (ซึ่งจะเปิดใช้งาน / ปิดใช้งานปุ่มตัวเลือก) และด้วยการควบคุม CSS ที่จะแสดงเฉพาะป้ายกำกับที่เกี่ยวข้องกับปุ่มตัวเลือกที่เลือก หากคุณต้องการอนุญาตให้เลือกหลายค่าคุณสามารถทำได้โดยใช้ช่องทำเครื่องหมายแทนปุ่มตัวเลือก

นี่คือตัวอย่าง รหัสอาจจะยุ่งกว่าเล็กน้อย (โดยเฉพาะเมื่อเทียบกับโซลูชันอื่น ๆ ):

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="yellow" id="color-yellow" />
      <label for="color-yellow">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="pink" id="color-pink" />
      <label for="color-pink">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="turquoise" id="color-turquoise" />
      <label for="color-turquoise">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
      </label>
    </div>
  </div>
</div>

โซลูชันข้ามเบราว์เซอร์ jQuery อื่นสำหรับปัญหานี้คือhttp://designwithpc.com/Plugins/ddSlickซึ่งทำขึ้นเพื่อการใช้งานนี้อย่างแท้จริง

กับประเทศภาษาหรือสกุลเงินคุณสามารถใช้อีโมจิ

ทำงานร่วมกับเบราว์เซอร์ / ระบบปฏิบัติการที่สนับสนุนการใช้งานอีโมจิ

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

สำหรับภาพสองสีคุณสามารถใช้Fontelloและนำเข้าสัญลักษณ์ที่กำหนดเองที่คุณต้องการใช้ เพียงแค่ทำให้ภาพของคุณเป็น Illustrator, บันทึกเป็น SVG และวางลงในเว็บไซต์ Fontello จากนั้นดาวน์โหลดแบบอักษรที่กำหนดเองของคุณพร้อมที่จะนำเข้า ไม่มีจาวาสคริปต์!

ฉันลอง jquery แบบกำหนดเองตามเลือกด้วยภาพ แต่ไม่มีใครทำงานในเค้าโครงตอบสนอง ในที่สุดฉันก็มาถึง Bootstrap-Select หลังจากแก้ไขบางอย่างฉันก็สามารถสร้างรหัสนี้ได้

รหัสและ gitub repo ที่นี่

สำหรับผู้ที่ต้องการแสดงไอคอนและยอมรับวิธีแก้ปัญหา "ขาวดำ" ความเป็นไปได้อย่างหนึ่งคือการใช้ตัวอักขระ:

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

ตามส่วนขยายไอคอนของคุณสามารถเก็บไว้ในแบบอักษรที่กำหนดเอง นี่คือตัวอย่างโดยใช้แบบอักษรFontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

ประโยชน์อย่างหนึ่งคือไม่ต้องใช้ Javascript ใด ๆ อย่างไรก็ตามโปรดทราบว่าการโหลดแบบอักษรทั้งหมดจะไม่ทำให้การโหลดหน้าเว็บของคุณช้าลง

หมายเหตุ: วิธีการใช้ภาพพื้นหลังดูเหมือนจะไม่ทำงานอีกต่อไปใน Firefox (อย่างน้อยในรุ่น 57 "Quantum"):

<select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>

Alvaros JS คำตอบฟรีเป็นการเริ่มต้นที่ยอดเยี่ยมสำหรับฉันและฉันพยายามรับคำตอบแบบ JS ฟรีอย่างแท้จริงซึ่งยังคงมอบฟังก์ชั่นทั้งหมดที่คาดหวังจาก Select with images แต่รูปแบบการซ้อนที่น่าเศร้าคือการล่มสลาย ฉันกำลังโพสต์โซลูชันสองรายการที่นี่; โซลูชันหลักของฉันที่ใช้ JavaScript 1 บรรทัดและโซลูชันที่ไม่มี JavaScript ทั้งหมดที่จะไม่ทำงานในรูปแบบอื่น แต่อาจมีประโยชน์สำหรับเมนู nav

น่าเสียดายที่มีการทำซ้ำเล็กน้อยในรหัส แต่เมื่อคุณคิดเกี่ยวกับสิ่งที่เลือกมันทำให้รู้สึก เมื่อคุณคลิกที่ตัวเลือกมันจะคัดลอกข้อความนั้นไปยังพื้นที่ที่เลือกกล่าวคือการคลิก 1 จาก 4 ตัวเลือกจะไม่เปลี่ยนแปลงตัวเลือก 4 ตัว แต่ด้านบนจะทำซ้ำตัวเลือกที่คุณคลิก หากต้องการทำเช่นนี้กับรูปภาพจะต้องใช้ JavaScript หรือ orrrr ... คุณทำซ้ำรายการ

ในตัวอย่างของฉันเรามีรายการเกม (ผลิตภัณฑ์) ซึ่งมีรุ่น แต่ละผลิตภัณฑ์อาจมีส่วนขยายซึ่งอาจมีรุ่นด้วย สำหรับแต่ละผลิตภัณฑ์เราจะให้รายชื่อผู้ใช้ของแต่ละเวอร์ชันหากมีมากกว่าหนึ่งรายการพร้อมกับข้อความเฉพาะรูปภาพและเวอร์ชัน

<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
    <div class="rich-select-option-body pl-2">
        <img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
    </div>
}
else
{
    <h5>Select the version</h5>
    <div class="rich-select custom-select">
        <div class="rich-select-dropdown">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
                    <div class="rich-select-option-body">
                        <label tabindex="-1">
                            <img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
        <input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
        <label for="rich-select-dropdown-button"></label>
        <div class="rich-select-options">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <div class="rich-select-option-body">
                        <label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
                            <img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
    </div>
}

การใช้ JS สำหรับการยกเลิกการเลือกช่องทำเครื่องหมายเราสามารถมีหลายอินสแตนซ์ในแบบฟอร์ม ที่นี่ฉันได้ขยายเพื่อแสดงรายการการขยายซึ่งมีตรรกะแบบเดียวกันกับเวอร์ชันต่างๆ

<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
    <div class="form-row">
        <div class="custom-control custom-checkbox w-100">
            <input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
            <label class="custom-control-label w-100" for="exp-@expansion.ProductId">

                @if (expansion.Versions.Count == 1)
                {
                    <div class="rich-select-option-body pl-2">
                        <img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
                    </div>
                }
                else
                {
                    <div class="rich-select custom-select">
                        <div class="rich-select-dropdown">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
                                    <div class="rich-select-option-body">
                                        <label tabindex="-1">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>

                        <input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
                        <label for="rich-select-dropdown-button-@expansion.ProductId"></label>
                        <div class="rich-select-options">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <div class="rich-select-option-body">
                                        <label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }
            </label>
        </div>
    </div>

แน่นอนว่าต้องใช้ CSS ที่ค่อนข้างยุติธรรมซึ่งฉันได้รวมไว้ในJSFiddle นี้เท่านั้นเพื่อลดขนาดของคำตอบที่ใหญ่โตนี้ ฉันใช้ Bootstrap 4 เพื่อลดจำนวนเงินที่ต้องการและยังอนุญาตให้เหมาะสมกับตัวควบคุม Bootstrap อื่น ๆ และการปรับแต่งไซต์ที่กำหนดเอง

ภาพถูกตั้งค่าเป็น 75px แต่สามารถเปลี่ยนแปลงได้อย่างง่ายดายใน 5 บรรทัดใน.rich-selectและ.rich-select-option-body img

ฉันได้รับปัญหาเดียวกัน วิธีการแก้ปัญหาของฉันคือด้านหน้าของปุ่มตัวเลือกโดยมีรูปภาพอยู่ด้านขวา เนื่องจากคุณสามารถเลือกได้เพียงตัวเลือกเดียวที่ตัวเลือกวิทยุมันทำงาน (เหมือน) ตัวเลือก

Worket ดีสำหรับฉัน หวังว่ามันจะช่วยคนอื่นได้

นี่ใช้ ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

ทรัพยากรข้อมูลคือ json แต่คุณไม่จำเป็นต้องใช้ json ถ้าคุณต้องการคุณสามารถใช้กับ css

ตัวอย่าง Css: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

ตัวอย่าง Json: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

ต้นฉบับ

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

ปรับปรุง: ตั้งแต่ปี 2018 ดูเหมือนว่าจะใช้งานได้ในขณะนี้ ทดสอบใน Chrome, Firefox, IE และ Edge

<!DOCTYPE html>
<html>
<body>

<style>
select#newlocale option[value="volvo"]   { background-color: powderblue;   }
select#newlocale option[value="opel"]   { background-color: red;   }
select#newlocale option[value="audi"]   { background-color: green;   }
</style> 

<select id="newlocale">
  <option value="volvo"><div >Volvo</div></option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>