How can I make this a drop-down menu?

by Friendly Toucan May 21st 2023, 2:36 pm

Hello,

I have added a "profile field" (images list) with about 200 different options.

Right know, when looking at the page were you edit your profile, the options are all just stacked, taking up a lot of space. Is it possible to put them all in a drop-down menu somehow?

Thanks.

by Jucarese May 21st 2023, 7:59 pm

It would be nice to be able to see it in order to generate good help for you, but you can try this for now:

Code:: .postprofile { overflow:auto;}

by Niko May 22nd 2023, 8:24 pm

Coucou @Friendly Toucan,

sadly you cannot use images in a

Code:: <select>

element, but maybe this can be helpful.

edit: I found a possible way, so I am hiding the older solutions in a spoiler, just as reference I will keep them
Create a new javascript code in all pages with this content:

Code:: var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]'); var $select = $('<select></select>'); // create a select $select.attr('name', $checkbox.attr('name')); // set name and value $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#profile_field_8_2 li label').remove(); $('select[name="profile_field_8_2"]').after('<div id="sovereign_state_flag"></div>'); $('#sovereign_state_flag').html('<img src="'+$('select[name="profile_field_8_2"]').find(":selected").attr('flag')+'" />'); $('select[name="profile_field_8_2"]').on('change', function() { var flag = $(this).find(":selected").attr('flag'); $('#sovereign_state_flag').html('<img src="'+flag+'" />'); });

And this CSS:

Code:: div#sovereign_state_flag { display: inline; vertical-align: middle; margin-left: 7px; }

This is the outcome:

How can I make this a drop-down menu? Scree124

How can I make this a drop-down menu? Scree125

Edit - Other options:

by Friendly Toucan May 22nd 2023, 9:08 pm

That looks very good!

Sadly, it did not work.

I have both the JS and CSS you provided activated right now...

by Niko May 23rd 2023, 10:09 am

Can you try with this javascript instead?

Code:: $(function() { var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]'); var $select = $('<select></select>'); // create a select $select.attr('name', $checkbox.attr('name')); // set name and value $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#profile_field_8_2 li label').remove(); $('select[name="profile_field_8_2"]').after('<div id="sovereign_state_flag"></div>'); $('#sovereign_state_flag').html('<img src="'+$('select[name="profile_field_8_2"]').find(":selected").attr('flag')+'" />'); $('select[name="profile_field_8_2"]').on('change', function() { var flag = $(this).find(":selected").attr('flag'); $('#sovereign_state_flag').html('<img src="'+flag+'" />'); }); })