javascript - 如何在选择标签javascript中将图像添加到动态选项

Question

我在 JSON 中有图像 url，如下所示：

var obj = [
   {
     country: "SG",
     images: "../images/flag/singapore.jpg"
   },
   {
     country: "TH",
     images: "../images/flag/thailand.jpg"
   }
]


function render() {
 return `
 <select name="sourcecountrycode" id="sourcecountrycode">
      ${obj.map((cn) => `
<option value=${cn.country}>${cn.country}</option>`)} 
// here options SG, TH are generated in select tag dynamically
  </select>
`
}

$('#block').html(render());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">
</div>

如何使用 JavaScript 将图像添加到选择中的相应选项？

标签： javascriptarrayshtmlobject

Answer 1

也许是一个开始的地方：我无耻地偷了这个https://www.addwebsolution.com/blog/adding-image-select-list-with-cross-browser-compatibility并试图让它动态化。它不漂亮，但它有点工作。

jQuery().ready(function() {
  /* Custom select design */
  var obj = [{
      country: "SG",
      images: "https://picsum.photos/25"
    },
    {
      country: "TH",
      images: "https://picsum.photos/25"
    }
  ];
  document.body.innerHTML = `
 <div class="drop-down">    
	   <select name="options">     
	   ${obj.map(cn => `
     <option class="${cn.country}" 
	   style="background-image:url('${cn.images}');" value="${cn.country}">${cn.country}</option> 
     `)}
</select>
</div>
`;

  jQuery('.drop-down').append('<div class="button"></div>');
  jQuery('.drop-down').append('<ul class="select-list"></ul>');
  jQuery('.drop-down select option').each(function() {
    var bg = jQuery(this).css('background-image');
    jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>');
  });
  jQuery('.drop-down .button').html('<span style=background-image:' + jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">></a>');
  jQuery('.drop-down ul li').each(function() {
    if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
      jQuery(this).addClass('active');
    }
  });
  jQuery('.drop-down .select-list span').on('click', function() {
    var dd_text = jQuery(this).text();
    var dd_img = jQuery(this).css('background-image');
    var dd_val = jQuery(this).attr('value');
    jQuery('.drop-down .button').html('<span style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">></a>');
    jQuery('.drop-down .select-list span').parent().removeClass('active');
    jQuery(this).parent().addClass('active');
    $('.drop-down select[name=options]').val(dd_val);
    $('.drop-down .select-list li').slideUp();
  });
  jQuery('.drop-down .button').on('click', 'a.select-list-link', function() {
    jQuery('.drop-down ul li').slideToggle();
  });
  /* End */
});

.drop-down {
  position: relative;
  display: inline-block;
  width: auto;
  margin-top: 0;
}

.drop-down select {
  display: none;
}

.drop-down .select-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin-top: 40px;
  padding: 0;
  background-color: #595959;
}

.drop-down .select-list li {
  display: none;
}

.drop-down .select-list li span {
  display: inline-block;
  min-height: 40px;
  min-width: 280px;
  width: 100%;
  padding: 5px 15px 5px 35px;
  background-color: #595959;
  background-position: left 10px center;
  background-repeat: no-repeat;
  font-size: 16px;
  text-align: left;
  color: #FFF;
  opacity: 0.7;
  box-sizing: border-box;
}

.drop-down .select-list li span:hover,
.drop-down .select-list li span:focus {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>