javascript - 使用 innerhtml 显示下拉列表文本而不是值
问题描述
我有一个下拉列表,其功能如下:
car_list.options[1] = new Option('Mazda', 'A_Mazda');
我将 A_Mazda 作为下拉列表的值进行区分。现在,我有一个按钮,它将在表格视图中显示下拉列表的值。我要显示的是下拉列表的文本,而不是值。函数 addRow() 是我在表格形式中显示下拉列表值的方法。至于现在,单击按钮时显示的是 A_Mazda 而不是 Mazda。请帮忙
function addRow(){
var table = document.getElementById("result-table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = car.value;
row.insertCell(1).innerHTML = model.value;
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function getDestination(){
var model_list = document.getElementById('model');
var car_list = document.getElementById("destination");
var list1SelectedValue = model_list.options[model_list.selectedIndex].value;
if (list1SelectedValue=='Cars')
{
car_list.options.length=0;
car_list.options[0] = new Option('--SELECT A CAR--', '');
car_list.options[1] = new Option('Mazda', 'A_Mazda');
car_list.options[2] = new Option('Toyota', 'B_Toyota');
car_list.options[3] = new Option('Honda', 'C_Honda');
car_list.options[4] = new Option('Hyundai', 'D_Hyundai');
}
else if (list1SelectedValue=='Food')
{
destination_list.options.length=0;
destination_list.options[0] = new Option('--SELECT A FOOD--', '');
destination_list.options[1] = new Option('Burger', 'A_Burger');
destination_list.options[2] = new Option('Fries', 'B_Fries');
destination_list.options[3] = new Option('Pasta', 'C_Pasta');
destination_list.options[4] = new Option('Ice cream', 'D_Ice_cream');
}
}
<h4>MODEL</h4>
<select class="form-control" id='model' name='model' onClick="getDestination()">
<option value = "Cars">Cars</option>
<option value = "Food">Food</option>
</select>
<h4>Car</h4>
<select class="form-control" id='destination' name='destination' onClick="getCriteria()" >
</select>
<input type= "button" id= "add" value="Add Destination" onclick= "Javascript:addRow()">
</td>
解决方案
使用选项的 .text 属性,而不是 .value,例如
row.insertCell(0).innerText = car.options[car.selectedIndex].text
推荐阅读
- sql-server - 使用多列的 Group by 和 Have 子句
- bash - 如何在引号内除以和乘以变量
- excel-formula - Power BI:比较表格视觉对象中的两列
- raspberry-pi - 通过 Gstreamer 在 RPI4 上使用硬件加速播放 mp4 视频
- python - 如何在笔记本中并排打印 DataFrame 列表中的 DataFrame,请注意列表中的 DataFrame 数量未知
- flutter - Flutter 聚焦文本字段颜色
- angular - 基于其他元素位置的角度动画变换 x
- mysql - 如何编写触发器来强制执行以下业务规则:?
- javascript - 不点击追加 3 行,然后每次点击点击 1 行
- sql - 在循环中为日期时间生成 SQL