Transform a 'Images List' profile field into a Select dropdown

Coucou,

based on the solution I provided here, I thought it would've been nice to also share it here

1. Demo

To turn this...


... into this

2. Javascript management

Go to ACP > Modules > HTML & Javascript management > Javascript codes management and create a new JS code with these settings.
Remember to check if the JS management is enabled. If not, activate it

• Title: does not affect the result
  
• Where: all pages
  
• Code
  
  

  Code:

  $(function() {
/*
Title: Transform a 'Images List' profile field into a Select dropdown
Author: Niko
Version: 1.3
Release Date: 23.05.2023 (dd.mm.year)
Contact: https://www.fmcodes.net/u2
Original content: https://www.fmcodes.net/t2035-
*/


var field_codes = ['profile_field_8_6','profile_field_8_5'];

for (i = 0; i < field_codes.length; ++i) {
    var field_code = field_codes[i];
 
var $checkbox = $('ul#'+field_code+' li label input[type=radio]');
var $select = $('<select></select>');    // create a select
$select.attr('name', $checkbox.attr('name'));    // set name and value
$select.attr('class', 'list_select');
 
$checkbox.each(function(i, checkbox){
    var str = $checkbox.eq(i).val();
    var alt = $checkbox.eq(i).parent().find('img').attr('title');
    var flag = $checkbox.eq(i).parent().find('img').attr('src');
    var checked = $checkbox.eq(i).prop('checked');
    $select.append($('<option>').val(str).attr('flag',flag).text(alt).attr('selected',checked));
});
 
$checkbox.parent().parent().parent().after($select);
$('ul#'+field_code+' li label').remove();
$('select[name="'+field_code+'"]').after('<div class="image_flag" id="image_flag_'+field_code+'"></div>');
$('.image_flag#image_flag_'+field_code).html('<img src="'+$('select[name="'+field_code+'"]').find(":selected").attr('flag')+'" />');

}

$('select.list_select').on('change', function() {
    var profile_field_id = $(this).attr('name');
    var flag = $('select[name="'+profile_field_id+'"]').find(":selected").attr('flag');
    $('.image_flag#image_flag_'+profile_field_id).html('<img src="'+flag+'" />');
});
});

2.1 Javascript Modification

You only need to replace the content of the variable

Code: var field_codes = ['profile_field_8_6','profile_field_8_5'];

with the HTML ID of the profile field you are referring to.
Please take note that this is an array - therefore you can even have more fields (working individually) but with the same effect

• Example with only one profile field
  

  Code:

  var field_codes = ['profile_field_8_6'];

• Example with multiple profile fields
  

  Code:

  var field_codes = ['profile_field_8_6','profile_field_8_5'];

  
  

How to find it?:

3. CSS Style Sheet

Then, add this CSS - which can be customized as preferred - and it's here used to put the image inline with the select element

Code:

div.image_flag {
    display: inline;
    vertical-align: middle;
    margin-left: 7px;
}

And that's it!
A simple pill, but maybe it may be useful for someone

nice !!

Thanks a lot @skouliki

Very nice 

Woow! This is very Useful @Niko
Congrats

Quick question: If i want more than one profile field in drowpdown style, what i need to do ?

Thanks @TonnyKamper and Thanks @YoshiGM

@YoshiGM - I've updated the script in the first topic, now you can set an array of profile field IDs

Ok, perfect then

Thanks :zen: