使用 jquery 设置 select2 输入的值

Posted 2023-05-07

【中文标题】使用 jquery 设置 select2 输入的值

【英文标题】：Setting the value of a select2 input with jquery

【发布时间】：2014-01-29 22:40:08

【问题描述】：

我正在尝试使用 jquery 设置 select2 值。这可能是一个重复的问题，但我在这里阅读了 30 条不同的回复，但没有找到一个可以解决我的问题的回复。

HTML 代码：

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

我尝试了多种不同的方法来选择“橙色”。请注意，此 jQuery 在按下某个键时执行。此外，由于多种原因，html 不可编辑。只有 jQuery 可以更改。

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

【参考方案1】：

最终找到了解决方案。

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

【讨论】：

谢谢。这行得通。是否有任何解决方案可以进行多个选择/值？例如。值 1,2 和 5。

我找到了。像这样：select2('val', ['1','2','5']) 从这里***.com/questions/12889552/…

【参考方案2】：

试试这个： 你可以通过select id来选择它。 现场演示：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)
     );
);

您也可以像这样通过 id 和 value 选择它：

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

【讨论】：

@Zack：你试过这个吗？

我没有尝试过，但我只是尝试过，但它不起作用。我编辑了问题以包含更多的 javascript...也许这会有所帮助？

@Zack : 按 CTRL + ALT+ N 然后它会在你的选择框中选择橙色。

抱歉，我出去吃午饭了。还是行不通。无法弄清楚为什么。我会尝试一下。

你在现场演示中检查了吗？按 CTRL + ALT+ N

【参考方案3】：

检测多个按键，尤其是使用修饰符时，非常棘手。

查看this other post，然后确保您的按键事件正在生成更基本的结果（一些简单的，例如alert()），然后再添加更复杂的行为，例如更改下拉列表的值，这也可以根据浏览器和下拉菜单本身会很棘手。

【讨论】：

是的....我试过了...该活动运行良好。我还有 50 件其他事情要在活动中运行。这是唯一一个不起作用的。