How to get a HTML select element to display a differenct value when an option is selected than is shown in the dropdown list?

Issue

For Example I am using a dropdown list of countries with telephone codes shown here: Dropdown list

When I select an option the whole country and number is displayed, but I would rather just the number code be displayed. How can this be done?

Solution

You can use two dropdowns for this. One with the values to show and the other with the values to select. Then synchronize both with javascript.

https://jsfiddle.net/81nbvtLx/7/

With jQuery you can use:

$('#sel2').change(function() {
    $('#sel1').prop('selectedIndex', $(this).prop('selectedIndex'));
});

Answered By - user3153298