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");
     })
 }())

Answer 1

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)

Answer 2

Ended up finding the solution.

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

Answer 3

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.