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

You might want to check how to do this in jQuery. [http://stackoverflow.com/questions/2173527/jquery-find-a-radio-button-by-value][1] [1]: http://stackoverflow.com/questions/2173527/jquery-find-a-radio-button-by-value — Whirl Mind, Jan 25 '15 at 05:59

score 1 · Answer 1 · answered Jan 25 '15 at 05:53

1

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

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

JSFiddle

answered Jan 25 '15 at 05:53

potashin

44,205
11
83
107

I am trying this code but getting this error querySelector is not defined in console. – Meetesh Jan 25 '15 at 06:00
@meetesh : you've missed `document.` before `querySelector(<...>)` – potashin Jan 25 '15 at 06:02

score 0 · Answer 2 · answered Jan 25 '15 at 07:34

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>

Andrew Shepherd · Answer 3 · 2015-01-25T11:08:08.687

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...

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

3 Answers3