Question

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

我试过了：

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

我也尝试过：

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

正如某处所建议的那样。

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

这个功能失败的原因是什么？它被称为重要的那一刻（我的意思是，如果我的选择框首先呈现值，然后调用该函数，或者它可能是其他东西吗？

HTML code：

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

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

Answer 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

Answer 2

试试这个

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

OR

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

CHECK DEMO

Answer 3

你的jQuery works - 其他东西正在干扰。

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

修改

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

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

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

并在其后立即添加此行：

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

Source

Answer 4

我难以理解这个错误，并且无论我编码什么（可能在3个小时内）都无法修复OnLoad事件。最后幸运的是我浏览了http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/网页（感谢@Dan解决我的头痛问题），看到真正缺失的部分不在＆＃34; OnLoad＆＃34;，在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");

Answer 5

测试是javascript对象。

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

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

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

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

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

5 个答案: