Setting the value of a select2 input with jquery

Question

I am attempting to set a select2 value using jquery. This is likely a duplicate question but I have read 30 different responses on here and haven't found one that solves my problem.

HTML code:

<div class="has_many_fields" data-required-has-many-fields-rows="1" id="location_account_associations"><input id="location_account_associations_attributes_0__destroy" name="location[account_associations_attributes][0][_destroy]" type="hidden" value="false" />
<div class="has_many_fields_row countable" id="location_account_associations_attributes_0">
    <div class="form__row form__row--spreadsheet">
        <div class="form__row__body">
            <div class="form__row__field-wrapper">
                <ul class="grid grid--no-gutters">
                    <li class="grid__6 grid__x--show">
                        Account Thing
                        <input id="location_account_associations_attributes_0_ab_account_id" name="location[account_associations_attributes][0][ab_account_id]" type="hidden" value="42" />
                    </li>
                    <li class="grid__5">
                        <select class="js-select2-combobox" id="location_account_associations_attributes_0_account_id" name="location[account_associations_attributes][0][account_id]" placeholder=" " reflection="#&lt;ActiveRecord::Reflection::AssociationReflection:0x012fb5asd200e8&gt;">
                            <option value=""></option>
                            <option value="1">Orange</option>
                            <option value="2">Apple</option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

I have tried multiple different approaches to get "Orange" to be selected. Note that this jQuery executes when a certain keystroke is pressed. Also, for a number of reasons, the HTML is not editable. Only the jQuery can be changed.

Javascript/jQuery:

(function() {
    $(document).on("keydown", function(e) {

        // ignore unless CTRL + ALT/COMMAND + N was pressed
        if (!(e.keyCode == 78 && e.ctrlKey && e.altKey )) return

        jQuery('[name*="[account_associations_attributes][0]').select2("val",1);
        jQuery('[name*="[account_associations_attributes][0]').select2("val","Orange");
     })
 }())

score 6 · Answer 1 · answered Jan 10 '14 at 22:27

6

Ended up finding the solution.

jQuery('[name*="[account_associations_attributes][0]"]').select2('val', '1')

answered Jan 10 '14 at 22:27

Zack

2,377
4
25
51

Thank you. This worked. Is there any solution to make multiple selection/values? For ex. value 1,2 and 5. – ewroman Jan 14 '15 at 00:53
I have found. Like this: `select2('val', ['1','2','5'])` from here http://stackoverflow.com/questions/12889552/how-to-set-selected-value-in-multi-value-select-in-jquery-select2 – ewroman Jan 14 '15 at 00:57

Awlad Liton · Accepted Answer · 2014-01-10T20:22:17.987

2

Try this:
You can select it by select id.
Live demo : http://jsfiddle.net/5Y9mG/10/

  $(document).ready(function(){

    $(document).on("keydown", function(e) {

        // ignore unless CTRL + ALT/COMMAND + N was pressed
     if (!(e.keyCode == 78 && e.ctrlKey && e.altKey )) return;
        $('#location_account_associations_attributes_0_account_id option:eq(1)').prop('selected', true)
     });
});

You also select it by id and value like this:

 $('#location_account_associations_attributes_0_account_id option[value="1"]').prop('selected', true)

edited Jan 10 '14 at 20:22

answered Jan 10 '14 at 19:54

Awlad Liton

9,366
2
27
53

@Zack: did you try this? – Awlad Liton Jan 10 '14 at 20:02
I hadn't tried it but I just did and it wouldn't work. I edited the question to include more of the javascript... Perhaps that will help? – Zack Jan 10 '14 at 20:12
@Zack : press CTRL + ALT+ N then it will select orange in your select box. – Awlad Liton Jan 10 '14 at 20:30
Sorry, I was out to lunch. Still not working. Cannot figure out why. I will experiment around for a bit. – Zack Jan 10 '14 at 21:22
did you check it in live demo? press CTRL + ALT+ N – Awlad Liton Jan 10 '14 at 21:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44983/discussion-between-awlad-liton-and-zack) – Awlad Liton Jan 10 '14 at 21:30

score -1 · Answer 3 · edited May 23 '17 at 12:29

-1

Detecting multiple keypresses, especially with modifiers, is very tricky.

Take a look at this other post and then make sure your keypress event is generating a more basic result (something simple, like an alert()) before you add more complex behavior like changing the values of the dropdown, which can also be tricky depending on the browser and the dropdown itself.

edited May 23 '17 at 12:29

Community

1
1

answered Jan 10 '14 at 20:27

Dpeif

532
1
6
18

Yea.... I tried that... The event is working fine. I've got like 50 other things that run on the event. This is the only one that doesn't work. – Zack Jan 10 '14 at 21:21

Setting the value of a select2 input with jquery

3 Answers3