Jquery - highlight selected from select option based from the returned ajax value

Question

I have an ajax that return values from an another page, I want to target a value that matches from the value ajax returns and select it on the tag.

Here's my code so far:

        success: function(data) {
            $("select[name='account_type']").val(data.account_type).prop('selected', true);
        },

I want to target this:

   <select class="form-control">
          <option value="0">DEBIT</option>
          <option value="1">CREDIT</option>
   </select>

So if the ajax call returns value of 1, then CREDIT should be :selected

Possible duplicate of [Set select option 'selected', by value](https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value) — Sangram Nandkhile, Jun 20 '18 at 07:04

score 1 · Accepted Answer · answered Jun 20 '18 at 07:01

1

For ajax:

success: function(data) {
            $("select[name='account_type']").val(data.account_type).prop('selected', true);
        },

For HTML

<select name="account_type" class="form-control">
          <option value="0">DEBIT</option>
          <option value="1">CREDIT</option>
   </select>

answered Jun 20 '18 at 07:01

Dhrutika Rathod

540
2
6
22

@Root please mark as accepted if it is helpful to you. – Dhrutika Rathod Jun 20 '18 at 07:02

score 1 · Answer 2 · answered Jun 20 '18 at 07:01

Set name of select element as you are using it

<select name="account_type" class="form-control">

and .prop() is not required so just remove it.

$("select[name='account_type']").val(1)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="account_type" class="form-control">
  <option value="0">DEBIT</option>
  <option value="1">CREDIT</option>
</select>

score 0 · Answer 3 · answered Jun 20 '18 at 07:05

prop is not needed:

 success: function(data) {
            $("select[name='account_type']").val(data.account_type);
        },

then give name else use $("select.form-control")

   <select name=account_type class="form-control">
          <option value="0">DEBIT</option>
          <option value="1">CREDIT</option>
   </select>

score 0 · Answer 4 · answered Jun 20 '18 at 07:12

Your HTML :

<select class="form-control" name="account_type">
  <option value="0">DEBIT</option>
  <option value="1">CREDIT</option>

Your ajax response function :

success: function(data) {
$('select[name="account_type"]').find('option[value=data.account_type]').attr("selected",true);

},

Jquery - highlight selected from select option based from the returned ajax value

4 Answers4