У меня есть поле выбора, к которому прикреплены значения стран (например, Великобритания, Великобритания)
Моя цель - отобразить изображение флага страны на странице в зависимости от выбранной опции
Невозможно вставить путь к изображению в опциях выбора, поэтому я хочу иметь возможность извлечь последние 2 символа значения опции и использовать их в результирующем изображении, например,
<img src="/images/countries/IN.png">
для Индии
Можно ли это сделать с помощью js?
В настоящий момент у меня есть следующее с jQuery, который возвращает текстовое значение выбранной опции, но хочу добиться этого в 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>