javascript - jQuery ComboBox : No matter what I try, 我无法将值返回到我的选择框(无法以编程方式选择所需的选项)

Question

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

我尝试过:

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

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

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 .