[英]Get inner html of the selected option by value NOT INDEX in javascript
I have HTML code 我有HTML代码
<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. 我想要一个JavaScript,用于通过其值获取option的
innerHTML
。
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
语法错误:指定了无效或非法的字符串
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>
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. 您只需要使用
options
属性来获取所有可用选项, selectedIndex
属性以了解selectedIndex
了哪个选项,以及使用selected选项的innerHTML
属性。
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. 请注意,如果将HTML放在option元素内,它将忽略HTML标签,而只是将文本串联在一起。 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.
这必须在HTML处理的早期阶段完成,因为在您访问javascript中的值时,您只是在访问文本。 If that's good enough then this solution will work, otherwise you will have to manually parse the inner html of the
select
element. 如果这足够好,那么此解决方案将起作用,否则,您将必须手动解析
select
元素的内部html。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.