Home/ Questions/Q 935
In Process

vinish.ai Latest Questions

  • 2
  • 2
Asked: 2020-09-19T08:26:40+00:00

How can I get a select list of countries with Flags displayed and returning country name in Oracle Apex

  • 2
  • 2

How can i get a select list of countries with Flags displayed and returning country name as similar on websites.

countryoracle apex
Share
Leave an answer

Leave an answer

Browse

5 Answers

  1. Hi!

    How to add flags in the navigation bar list? I use the dropdown menu to choose language 🙂

  2. You can add the country flags using the emoji. Here is an example:

    Create a table:

    create table country (cntry_name varchar2(30), flag varchar2(10));

    Get the emojis for flags from this link: https://emojipedia.org/flags/

    Copy the flags emoji from the above site and insert it into the table as below:

    insert into country values ('Austria', '🇦🇹');
insert into country values ('Australia', '🇦🇺');
insert into country values ('Guyana', '🇬🇾');

    In Oracle Apex, create a select list using the following SQL query:

    select flag ||' ' ||cntry_name d, cntry_name r from country
order by cntry_name

    Below is the output:

    Country list with flags.

    Please try and let me know if any issues.

  3. This answer was edited.

    This is another solution that will work on Windows too, but it is based on the jQuery. Follow these steps to create it:

    Add the following URLs to the JavaScript File Urls section:

    https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js
https://mojoaxel.github.io/bootstrap-select-country/dist/js/bootstrap-select-country.min.js
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js

    Add the following URLs to the CSS File Urls section:

    https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/xcode.min.css
https://mojoaxel.github.io/bootstrap-select-country/dist/css/bootstrap-select-country.min.css

    Add the following jQuery in Execute when page load section:

    $('#clist').change(function(){ 
apex.message.alert(document.getElementById("clist").options[document.getElementById("clist").selectedIndex].innerHTML);
})

    Create a new static region on the page and add the following HTML to Source > Text section:

    <select id="clist" class="selectpicker countrypicker" data-flag="true" ></select>

    Save the changes and run the page, you will get the output as below: Oracle Apex: country list dropdown with flags Instead of getting the dialog on selection, you can assign the selected value to a hidden item on your page.

    Change the JavaScript code added in the Execute when page load section, to the below code:

    $('#clist').change(function(){ 
apex.item('P2_COUNTRY').setValue(document.getElementById("clist").options[document.getElementById("clist").selectedIndex].innerHTML);
})

    Define a default value for item P2_COUNTRY as the first element value of the dropdown.

    Country list with flags.

    Also, instead of adding URLs here on the page, you can download the full source and can upload it to the static files so that you can use it on your page. Below is the download link of all source: https://mojoaxel.github.io/bootstrap-select-country/index.html