CODEWITHSUNDEEP
javascripthtml
Meetesh
Meetesh

Reputation: 182

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

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

Upvotes: 0

Views: 2566

Answers (3)

Andrew Shepherd
Andrew Shepherd

Reputation: 45252

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

Upvotes: 0

Whirl Mind
Whirl Mind

Reputation: 884

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>

Upvotes: 0

potashin
potashin

Reputation: 44581

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

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

JSFiddle

Upvotes: 1

Related Questions