Question

I am grabbing all inputs from a 5 tab form. When cyclying through them I am adding them to a review section. I have it working fine but I want to show the text of the select drop downs rather then the value as the value would not make sense to the user. Here is a couple of snippets of code I am using. This is inside and $(:input.each(function(){} I check to see if it is a select. If so I set a tmp variable and add on ‘_in’ to the name as I have all field names plus that on the confirm tab. Then I check the length of the new variable to make sure it is on the confirmation tab. If so update the html to the text. The issue is it shows all drop down text options. If I do .val() it gives only the value of the selected one.

//Gives all text options from the drop down.
if ($(this).prop('type') == 'select-one') {
  var tmp = '#'+$(this).attr('name')+'_in';
  if ($(tmp).length > 0) {
    $(tmp).html($(this).text());
  }         
}

//Gives only value of selected option from drop down.
if ($(this).prop('type') == 'select-one') {
  var tmp = '#'+$(this).attr('name')+'_in';
  if ($(tmp).length > 0) {
    $(tmp).html($(this).val());
  }

Fixed solution

if ($(this).prop('type') == 'select-one') {
  var tmp = '#'+$(this).attr('name')+'_in';
  var tmp2 = '#'+$(this).attr('name')+' option:selected';
  if ($(tmp).length > 0) {

tmp3 = $(tmp2).text();
$(tmp).html(tmp3);
}           
}

Answer 1

You can get the text of a select by using

$("#yourdropdownid option:selected").text();