Display dropdown list text instead of value using innerhtml

Question

I have a dropdown list with a function like this:

car_list.options[1] = new Option('Mazda', 'A_Mazda');

I put A_Mazda as the value of the dropdown for distinction. Now, I have a button which will display the dropdown list's values on a table view. What I want to display is text of the dropdown list and not the value. The function addRow() is what I did to display the dropdown list value in a table form. As for now, A_Mazda is displaying instead of Mazda when the button is cliked. Please help

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)" looks like a typo (also, better to attach listeners with Javascript instead of inline attributes) — CertainPerformance
– CertainPerformance, Commented Feb 19, 2019 at 0:38

Programnik · Accepted Answer · 2019-02-19 00:45:15Z

1

Use the .text property of the option, not .value, eg

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

answered Feb 19, 2019 at 0:45

Programnik

1,5491 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno Fajardo · Accepted Answer · 2019-02-19 00:45:22Z

0

Assuming car and model represent <option> elements, instead of car.value and model.value try to use the text attribute:

car.text
model.text

answered Feb 19, 2019 at 0:45

Bruno Fajardo

468 bronze badges

Collectives™ on Stack Overflow

Display dropdown list text instead of value using innerhtml

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related