使用 innerhtml 显示下拉列表文本而不是值

Posted 2023-05-07

【中文标题】使用 innerhtml 显示下拉列表文本而不是值

【英文标题】：Display dropdown list text instead of value using innerhtml

【发布时间】：2019-07-12 10:19:36

【问题描述】：

我有一个下拉列表，其功能如下：

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>
	

【问题讨论】：

onClick="Javacsript:deleteRow(this)" 看起来像一个错字（另外，最好使用 Javascript 而不是内联属性附加侦听器）

【参考方案1】：

使用选项的.text属性，而不是.value，例如

row.insertCell(0).innerText = car.options[car.selectedIndex].text

【参考方案2】：

假设car 和model 代表<option> 元素，而不是car.value 和model.value 尝试使用text 属性：

car.text
model.text