JavaScript 获取下拉列表 Option 的 Value 与 Text 值示例

JavaScript 获取下拉列表 Option 的 Value 与 Text 值示例

在开发实践中，处理下拉列表框时通常需提取 option 的 value 属性，但有时也需获取页面展示文本。例如，针对 <option value="value">ShowText</option>，如何提取 "ShowText"？操作简便，实现代码如下：

<script type="text/javascript">
function a(object){
alert(object);
}
</script>
<!-- 获取显示的值 -->
<select onchange="a(this.options[this.selectedIndex].innerText);">
<option value="value-a">text-a</option>
<option value="value-b">text-b</option>
</select>
<!-- 获取value的值 -->
<select onchange="a(this.options[this.selectedIndex].value);">
<option value="value-c">text-c</option>
<option value="value-d">text-d</option>
</select>
function isSelect(selectPress) {
 //var select = document.getElementById("mySelect").ind;
 var selectValue = selectPress.options[selectPress.selectedIndex].value; //显示value 下标0、1、2
 var selectValue2 = selectPress.options[selectPress.selectedIndex].innerText; //显示显示的值 具体内容(上海、北京)
 //alert(selectValue);
 //alert(selectValue2);
 if (selectValue == "-1") {
 alert("请选择城市，表单提交被拒绝！")
 return;
 }
 else {
 document.getElementById('form1').submit(); //form表单提交
 }
 }
<select onchange="isSelect(this);" id="mySelect">
 <option value="-1">--请选择--</option>
 <option value="0">北京</option>
 <option value="1">上海</option>
 <option value="2">武汉</option>
</select>