Setting the value of a select2 input with jquery

javascript, jquery, jquery-select2

Solution

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)

Problem

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

Original source

Related problems