Returning last 2 characters from selected html option in js

Question

I have a select box which has country values attached to it (United Kingdom UK for example)

My goal is to display a country flag image on the page depending on the option selected

It's not possible to insert the image path in the select options, so I want to be able to extract the last 2 characters of the option value and use them in the resulting image src eg

<img src="/images/countries/IN.png">

for India

Can this be done with js?

I have the following at the moment with jQuery which returns the text value of the selected option, but want achieve this in the image URL.

$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        document.getElementById("resultDiv").innerHTML = selectedCountry;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
    <label>Select Country:</label>
    <select class="country">
        <option value="United States US">United States US</option>
        <option value="India IN">India IN</option>
        <option value="United Kingdom UK">United Kingdom UK</option>
    </select>
</form>
<div id="resultDiv"><img src="images/++RESULT++.png"></div>

Why not just have the value of the selected option be the image name itself? — Chris
– Chris, Commented Sep 20, 2018 at 18:53
Thanks for the quick reply. I've elaborated on my question as I don't think I gave enough detail initially :) — Gary
– Gary, Commented Sep 20, 2018 at 19:44
Add a data-img attribute to each option that contains the path to the image you want to show, then read that (using $(".country option:selected").data('img')) and set the src of the img to that value. — Heretic Monkey
– Heretic Monkey, Commented Sep 20, 2018 at 21:05
Possible duplicate of Change image based on dropdown using javascript. — Heretic Monkey
– Heretic Monkey, Commented Sep 20, 2018 at 21:10

Gary · Accepted Answer · 2018-10-03 14:30:54Z

1

I have now managed to solve this issue with the following code. Thanks to all for their help!

$(document).ready(function(){
    $("select#country").change(function(){
        var selectedCountry = $("#country option:selected").val();
        var countryCode = selectedCountry.substring(selectedCountry.length-2, selectedCountry.length);
        $("#CountryFlag").html("<img src=\"/images/countries/" + countryCode + ".GIF\"  /> </object>");
    });
});

answered Oct 3, 2018 at 14:30

Gary

1011 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve Archer · Accepted Answer · 2018-09-20 18:55:08Z

0

You can get the last two characters with .substring()

selectedValue.substring(selectedValue.length-2, selectedValue.length)

answered Sep 20, 2018 at 18:55

Steve Archer

6514 silver badges10 bronze badges

Collectives™ on Stack Overflow

Returning last 2 characters from selected html option in js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related