jQuery ComboBox：无论我尝试啥，我都无法将值返回到我的选择框（无法以编程方式选择所需的选项）

Posted 2023-05-09

【中文标题】jQuery ComboBox：无论我尝试啥，我都无法将值返回到我的选择框（无法以编程方式选择所需的选项）

【英文标题】：jQuery ComboBox: No matter what I try, I can't get back value back to my select box (can't programmatically select desired option)jQuery ComboBox：无论我尝试什么，我都无法将值返回到我的选择框（无法以编程方式选择所需的选项）

【发布时间】：2012-09-26 01:15:39

【问题描述】：

我真的很努力在这里和谷歌上寻找可能的答案。我确实找到了一些答案，但是当我将它们应用于我的代码和我的情况时，它就不起作用了。

我试过了：

$("select#city option['City, ST']").attr('selected', 'selected');

我也试过了：

$("select#city").val('City, ST');

按照某处的建议。

我尝试将此代码放入 document.ready 函数 - 无济于事。然后我尝试将它放在顶部（虽然不是在头部），但没有 document.ready 但仍然相同。

此功能失败的原因可能是什么？调用它的时刻是否重要（我的意思是，如果我的带有值的选择框先呈现然后调用函数，这有关系吗？或者它可能是别的什么？

html 代码：

<div class="ui-widget">
            <h3>Location</h3>
            <form id="chooseCity" class="" action="" method="post">
                <select id="city" name="city">

                    <option value="Select Town">Select Town</option>
                    <option value='Acworth, NH'>Acworth, NH</option>
                    <option value='Alstead, NH'>Alstead, NH</option>
                    <option value='Alton, NH'>Alton, NH</option>
                    <option value='Alton Bay, NH'>Alton Bay, NH</option>
                    <option value='Amherst, NH'>Amherst, NH</option>
                    <option value='Andover, NH'>Andover, NH</option>
                    <option value='Antrim, NH'>Antrim, NH</option>
                    <option value='Concord, NH'>Concord, NH</option>
                </select>
            </form>
        </div>

这个循环会是罪魁祸首吗？也许它以某种方式干扰：

                <option value="Select Town">Select Town</option>
                    <?php foreach($arr as $city):
                        echo "<option value='$city'";
                        echo ($_POST['city-hp'] == $city) ? 'selected' : '';
                        echo ">".$city."</option>".PHP_EOL;
                    endforeach; ?>

重要编辑：

我发现了这段代码：

$(function() 
    $( "#city" ).combobox();
    $( "#toggle" ).click(function() 
        $( "#city" ).toggle();
    );
);

阻止我的组合框以编程方式选择所需的值。 但是这段代码对于选择框的样式至关重要。我已经从 jQuery UI 网站下载了示例并将其集成到我的网站中。

如何修改上述代码以保留其外观，同时允许所需的功能？

【问题讨论】：

您是想弄清楚选择了哪一个，还是预先选择了一个？你能包括一个选择的例子吗？

我不清楚“将值返回到我的选择框”是什么意思。请准确说明您想做什么。

请发布更多代码。更好，放入 JSFiddle。

从问题标题来看，我很确定他正在尝试以编程方式设置选定的值。

我有一个搜索页面。未登录的用户将被发送到登录屏幕。登录后，他们将被重定向回搜索结果。当我使用 totalStorage jquery 插件时，我能够获取预存储的值来重建我的数据库查询并获得我的结果，但我的选择框显示选择城市

【参考方案1】：

你可以试试这个以编程方式选择一个选项

HTML

<select id="city">
    <option value=1>CityOne</option>
    <option value=2>CityTwo</option>
</select>

JS

$('#city').val(2); // will select the item which has value=2

或

$('#city').prop("selectedIndex",1); // will select second item/index, first is 0

DEMO.

【讨论】：

您好，我发现了这段代码： $(function() $( "#city" ).combobox(); $( "#toggle" ).click(function () $( "#city" ).toggle(); ); );阻止我的选择框以编程方式选择所需的值。但是这段代码对于选择框的样式至关重要。我已经从 jQuery UI 网站下载了示例并将其集成到我的网站中。如何修改上述代码以保留其外观，同时允许所需的功能？

【参考方案2】：

你的 jQuery works - 有别的东西在干扰。

我建议浏览您可能已安装的其他插件，看看它们是否覆盖了选定的索引，可能只是选择中的第一个 <option>。 或者，如果您想详细说明您正在使用哪些技术，也许有人可以进一步帮助您。

编辑：

在this related question 上查看答案 - 看来您必须编辑插件的源代码。

在组合框插件中找到这一行：

.addClass("ui-widget ui-widget-content ui-corner-left");

并在其后立即添加这一行：

input.val( $(select).find("option:selected").text());

Source

【讨论】：

我正在使用 PHP（Concrete5 CMS）。正如我在另一条评论中所说，我什至在正确的位置得到了字符串 selected="selected"，但是选择框没有显示该值是选中的。

您好，我发现了这段代码： $(function() $( "#city" ).combobox(); $( "#toggle" ).click(function () $( "#city" ).toggle(); ); );阻止我的选择框以编程方式选择所需的值。但是这段代码对于选择框的样式至关重要。我已经从 jQuery UI 网站下载了示例并将其集成到我的网站中。如何修改上述代码以保留其外观，同时允许所需的功能？

您使用的是哪个组合框插件？

好的，我已经更新了我的答案。将来，请尝试在您的原始帖子中包含尽可能多的细节 - 这将真正帮助您获得快速、准确的答案。

【参考方案3】：

试试这个

  $('select#city').find('option[value*="City"][value*="ST"]').attr('selected', 'selected');

或

$("select#city option[value='City, ST']").attr('selected', 'selected');

CHECK DEMO

【讨论】：

如何让这个函数在页面底部与我的其他脚本隔离运行？它会在顶部工作吗？它必须在 document.ready 上吗？

【参考方案4】：

我遇到了这个错误，无论我编写什么代码都无法修复它（可能需要 3 个小时）。最后幸运的是，我浏览了http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ 网页（感谢@Dan 解决了我的头痛问题），发现真正缺少的部分不在“OnLoad”上，而是在 ui 定义函数本身上。 Jquery Ui官方网页上的标准定义函数不包含程序选择选项。

这是应该添加到定义函数中的函数：

//allows programmatic selection of combo using the option value
        setValue: function (value) 
            var $input = this.input;
            $("option", this.element).each(function () 
                if ($(this).val() == value) 
                    this.selected = true;
                    $input.val(this.text);
                    return false;
                
            );
        

我还制作了另一个函数来通过选项文本而不是选项值更改选择

//allows programmatic selection of combo using the option text
            setValueText: function (valueText) 
                var $input = this.input;
                var selectedText;                   
                $("option", this.element).each(function () 
                    if ($(this).text() == valueText) 
                        this.selected = true;
                        $input.val(this.text);                                                    
                        return false;
                    
                );                        
            

您可以在 OnLoad 或其他函数上使用这些函数：

$("#yourComboBoxID").combobox("setValue", "Your Option Value");

或

$("#yourComboBoxID").combobox("setValueText", "Your Option Text");

【参考方案5】：

test 是 javascript 对象。

test.controlid 是小部件实例的 id。

test.value 是您要选择的字符串。

你不需要测试对象，你可以直接使用id和value。

---

$("#" + test.controlid).parent().find("span").children("input").val(test.value);

var newObject = new Object();

newObject.item = new Object();

newObject.item.option = $('#' + test.controlid +' > option[value="' + test.value + '"]')[0];

$("#" + test.controlid).parent().find("span").children("input").trigger("autocompleteselect", newObject);

---

【讨论】：

欢迎来到 Stack Overflow！这是我来回顾作为你的第一个答案。它有几个问题。首先 - 你需要format the code correctly。其次，由于这是一个已被接受的答案的老问题 - 它确实需要一些额外的测试来解释为什么它比接受的答案做得更好（或完全不同的方法）。