Get inner html of the selected option by value NOT INDEX in javascript

Question

I have HTML code

<select id="city">
<option value="A">Mumbai</option> 
<option value="B">Bangalore</option> 
<option value="C">Delhi</option> 
<option value="D">Indore</option> 
</select>

I want a JavaScript for getting the innerHTML of option by its value.

I have tried

var selectedValue = document.getElementById('city').value;
var city = document.querySelector('#city option[value='+selectedValue+']').innerHTML;
alert(city);

But giving the error

SyntaxError: An invalid or illegal string was specified

Answer 1

You can use querySelector method with [value=A] selector :

var city = document.querySelector('#city option[value=A]').innerHTML

JSFiddle

Answer 2

Not sure why you might want to do that. Neways, here it is :

<select id="city">
<option value="A">Mumbai</option> 
<option value="B">Bangalore</option> 
<option value="C">Delhi</option> 
<option value="D">Indore</option> 
</select>
<script>
    var city = (document.getElementById('city').innerHTML).split('</option>');
    console.log(GetOptionHtml_ByValue('city', 'B'));

function GetOptionHtml_ByValue(xElementId, xValue) {
    AllHtml = (document.getElementById('city').innerHTML).split('</option>');
Array1 = [];
Array2 = [];
Array3 = [];
Array4  = [];
FoundIndex = -1;
for (i = 0; i < AllHtml.length; i++) {
    str = AllHtml[i];
    Array1 = str.split('<option value="');
    for (j = 0; j < Array1.length; j++) { 
        str2 = Array1[j];
        Array2 = str2.split('">');
            for (k = 0; k < Array2.length; k++) { 
                str3 = Array2[k];
                if ((j==1) && (k==0)) {
                        Array3.push(str3);
                        if (str3 == xValue) FoundIndex = Array3.length -1;
                    }

                if ((j==1) && (k==1))
                    Array4.push(str3);
            }
    }

}

if (FoundIndex > -1) 
    returnme = Array4[FoundIndex];
else
    returnme = 'NOT_FOUND';

return returnme;

}
</script>

Answer 3

You just need to use the options property to get all of the available options, the selectedIndex property to know which one is selected, and the innerHTML property of the selected option.

var cityElem = document.getElementById('city');

var selectedIndex = cityElem.selectedIndex;

if(selectedIndex != -1) {
    var selectedOption = cityElem.options[selectedIndex];
    var optionInnerHtml = selectedOption.innerHTML;
    alert(optionInnerHtml);
}

Mind you, if you put HTML inside an option element, it will ignore the HTML tags and just concatenate the text together. This must be done at an early stage of the HTML processing, because by the time you are accessing the values in the javascript, you are just accessing the text. If that's good enough then this solution will work, otherwise you will have to manually parse the inner html of the select element.

The jsfiddle...