How to display the selected value in dropdown list using jquery

Question

I have a drop down list

<div class="col-lg-8">
   <select class="form-control" id="question_type" name="agreement[question_type]">
      <option value="">Select Type</option>
      <option value="ss">Single select (checkbox)</option>
      <option value="ms">Multi option (radio)</option>
   </select>
</div>

After submitting the form I have placed this datas in table ,

<tr data-view-key="<?php echo $jagr_id; ?>">
   <td class="question_type">
   <?php
   if ($jagr_question_type == 'ss') {
       echo 'Single select (checkbox)';
   } else if ($jagr_question_type == 'ms') {
       echo 'Multi option (radio)';
   }
   ?>
    </td>
    <td><a href="#<?php echo $jagr_id; ?>" name="edit_agreement" ><span class="glyphicon glyphicon-edit" title="Edit"></span></a>&nbsp;&nbsp; <a href="#<?php echo $jagr_id; ?>" name="delete_agreement" ><span class="glyphicon glyphicon-trash" title="Delete"></span></a></td>
</tr>

and on the edit button click,i want to display the selected item in drop down list. following code is used for edit click

$(document).on("click", "a[name = 'edit_agreement']", function(event)
{
   event.preventDefault();
   var jagr_id = $(this).attr("href").substring(1);
   var parent = $(this).parents("[data-view-key='"+jagr_id+"']");
   var question_type = parent.find("td.question_type").text();
   $("#hdn_jagr_id").val(jagr_id);
   $("#question_type option:selected").text(question_type);     
});

using $("#question_type option:selected").text(question_type); i can display the text in the drop down list, but again submit the form the value not posted, Now the html part changed like this(repeating th eselected item)

<div class="col-lg-8">
   <select class="form-control" id="question_type" name="agreement[question_type]">
      <option value>Single select (checkbox)//selected item</option>
      <option value="ss">Single select (checkbox)</option>
      <option value="ms">Multi option (radio)</option>
   </select>
</div>

@Guruprasad question_type is not an id,fetched the data from the table using ("td.question_type") — Ann
– Ann, Commented Dec 30, 2015 at 4:28

Mohamed-Yousef · Accepted Answer · 2015-12-30 04:34:05Z

1

I really don't know what the question_type should be .. is it a text of option or value of option .. in all ways you need

.prop('selected' , true);

if question_type is a value of option

$("#question_type option[value='"+question_type+"']").prop('selected' , true);

if question_type is a text of option you can use .filter();

$("#question_type option").filter(function(){
   return $(this).text().trim() == question_type;
}).prop('selected' , true);

Working Demo

edited Dec 30, 2015 at 4:34

answered Dec 30, 2015 at 4:28

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

5 Comments

Ann Over a year ago

var question_type = parent.find("td.question_type").text(); console.log( question_type); //output- Single select (checkbox)(selected item)

Ann Over a year ago

'question_type' is text

Mohamed-Yousef Over a year ago

@Ann Ok Ann I updated my answer if text and with simple demo as well

Ann Over a year ago

filter function not working,I have tried this code,the selected item not displayed in the list.

Ann Over a year ago

Let us continue this discussion in chat.

Nole · Accepted Answer · 2020-06-24 13:50:58Z

0

This option worked for me:

$(document).ready(function(){

   $("#countryList").change(function(){

       var selectedCountry = $(this).children("option:selected").val();

       console.log("You have selected the country - " + selectedCountry);

   });

});

Of course, you need to have HTML list of countries. Something like this:

<select id="countryList">
    <option value="1">USA</option>
    <option value="2">Brasil</option>
    <option value="3">Spain</option>
</select>

answered Jun 24, 2020 at 13:50

Nole

8478 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to display the selected value in dropdown list using jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related