set a value as selected in select dropdown

Question

I tried to set a value as "selected" in my edit-form using jquery. Here's my HTML:

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value = leaveTypeId]').attr('selected', 'selected');

<div class="col-sm-8">
  <select name="leave_type" class="select2-container form-control" id="leave_type_edit">
          <option></option>
          <?php foreach ($LeaveTypes as $LeaveTypeNew):?>
          <option value="<?php echo $LeaveTypeNew->id; ?>"><?php echo $LeaveTypeNew->title; ?></option>
          <?php endforeach; ?>
        </select>
</div>

The select element is initialized with select2 plugin, if that matters. Any help is appreciated. Thanks.

Possible duplicate of [JQuery - how to select dropdown item based on value](https://stackoverflow.com/questions/8743975/jquery-how-to-select-dropdown-item-based-on-value) — Aiyaz Khorajia, Nov 07 '17 at 06:34

Xupitan · Accepted Answer · 2017-11-07T06:45:57.340

2

you can use :

$('#leave_type_edit').val(leaveTypeId );

it play same as example :

$('#get-id').on('click', function () {
    let value_select = $(this).attr('data-leaveTypeId');
    $('#leave_type_edit').val(value_select);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-8">
   <select name="leave_type" class="select2-container form-control" id="leave_type_edit">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
</div>
<button id="get-id" data-leaveTypeId="2">id check</button>

edited Nov 07 '17 at 06:45

answered Nov 07 '17 at 06:33

Xupitan

1,601
1
8
12

i 've added a example for it . if it doesn't work , you can check again `var leaveTypeId` of you : – Xupitan Nov 07 '17 at 06:49
i 've read document of select2 : you must add `.trigger('change')` after it : `$('#leave_type_edit').val(leaveTypeId ).trigger('change')` – Xupitan Nov 07 '17 at 06:53
.trigger('change') worked charm... thank you for your effort :) – Azima Nov 07 '17 at 07:54

Beginner · Answer 2 · 2017-11-07T07:04:14.357

2

It wont work because you are not putting it as variable what you actually putted is the string leaveTypeId not it's value

Change

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value = leaveTypeId]').attr('selected', 'selected');

to

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value='+leaveTypeId+']').attr('selected', 'selected');

Demo

Hope this helps you

edited Nov 07 '17 at 07:04

answered Nov 07 '17 at 06:58

Beginner

4,118
3
17
26

it seems like it is select2 issue... when I removed the initialization, it is working... – Azima Nov 07 '17 at 07:52

Pedram · Answer 3 · 2017-11-07T06:56:23.207

1

Try this one:

$('#leave_type_edit').change(function(){

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');

if($(this).val == leaveTypeId){
$(this).find('option').attr('selected','selected');
}
});

Or:

$('#leave_type_edit').change(function(){
var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');

$(this).find('option[value="'+leaveTypeId+'"]').attr('selected','selected');

});

Without change but onload:

var leaveTypeId = 2; // for example
$('#leave_type_edit').find('option[value="'+leaveTypeId+'"]').attr('selected','selected');

Working Demo

edited Nov 07 '17 at 06:56

answered Nov 07 '17 at 06:49

Pedram

15,766
10
44
73

it seems like it is select2 issue... when I removed the initialization, it is working... – Azima Nov 07 '17 at 07:52

set a value as selected in select dropdown

3 Answers3