0

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

我试过：

$("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 网站下载了示例并将其集成到我的网站中。

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

4

5 回答 5

2

您可以尝试以编程方式选择一个选项

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

演示。

于 2012-10-04T22:21:53.610 回答
1

试试这个

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

或者

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

检查演示

于 2012-10-04T22:19:58.597 回答
1

您的 jQuery工作- 其他东西正在干扰。

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

编辑：

请参阅此相关问题的答案 - 看起来您必须编辑插件的源代码。

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

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

并在其后立即添加此行：

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

来源

于 2012-10-04T23:13:36.167 回答
0

我难住了这个错误，无论我编写什么代码都无法修复它（可能需要 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");
于 2015-04-04T12:47:20.563 回答
-2

测试是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);
于 2015-02-10T15:51:32.310 回答