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="#<ActiveRecord::Reflection::AssociationReflection:0x012fb5asd200e8>">
<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");
})
}())
Ended up finding the solution.
jQuery('[name*="[account_associations_attributes][0]"]').select2('val', '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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With