javascript - Setting the value of a select2 input with jquery - Stack Overflow

admin管理员组

文章数量:1291109

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

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

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Oct 22, 2014 at 20:45 Lawtonfogle 95944 gold badges1818 silver badges3232 bronze badges asked Jan 10, 2014 at 19:44 ZackZack 2,49744 gold badges2727 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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/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)

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 plex behavior like changing the values of the dropdown, which can also be tricky depending on the browser and the dropdown itself.

本文标签： javascriptSetting the value of a select2 input with jqueryStack Overflow