Question

我有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>

我想要一个JavaScript来获取其值的innerHTML选项。

我试过了

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

但是给出了错误

SyntaxError：指定了无效或非法字符串

Answer 1

您可以将querySelector方法与[value=A]选择器一起使用：

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

JSFiddle

Answer 2

不确定为什么要这样做。新的，在这里：

<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

您只需使用options属性获取所有可用选项，selectedIndex属性以了解所选项，以及所选选项的innerHTML属性。

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

var selectedIndex = cityElem.selectedIndex;

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

请注意，如果将HTML放在选项元素中，它将忽略HTML标记并将文本连接在一起。这必须在HTML处理的早期阶段完成，因为当您访问javascript中的值时，您只是访问文本。如果这足够好，那么这个解决方案将起作用，否则你将不得不手动解析select元素的内部html。

The jsfiddle...

在javascript中通过值NOT INDEX获取所选选项的内部html

3 个答案: