Javascript jQuery - selecting select 框选项仅有时有效

Question

该项目是PHP

中编写的MVC项目

我有一个 AJAX 调用在一个 div 的视图中回显，一些 Javascript 在页面上做一些事情。脚本的末尾是一段 JQuery，应该更改 select 框 selected 选项。我在这个网站和其他网站上对切换 select 选项进行了大量研究，经过一番尝试后，我得到了这段代码：

function filterSet(optValue){

    $("#mySelect option").prop('selected', false)
                         .filter('[value="'+ optValue +'"]')
                         .prop('selected', true);
}

奇怪的是，有时有效，有时无效。在过去一个小时左右的时间里对其进行了测试，它曾经工作过一次，但在那之前它确实工作过，我对代码所做的唯一更改是更改了封闭方法名称。

控制台给出的错误是 'ReferenceError: maple is not defined'，其中 'maple' 是 optValue 变量中的单词。

ReferenceError: maple 未定义

考虑到 select 选项的值被硬编码到 select html，我不明白为什么我会得到一个未定义的错误，我试过 jquery将选项值硬编码为变量应该传入的值，但我仍然遇到相同的错误，这很奇怪，因为曾经有一段时间这段代码工作得很好！实际上不止一次，它在多次测试时有效！但知道它不是。

select框html:

<select id="mySelect">
        <option value = 'all' selected> Ward </option>
        <option value = 'maple'> Maple </option>
        <option value = 'oak'> Oak </option>
        <option value = 'w3'> Ward 3 </option>
        <option value = 'w4'> Ward 4 </option>
        <option value = 'w5'> Ward 5 </option>
        <option value = 'w6'> Ward 6 </option>
</select>

任何人都可以阐明这一点吗？

如何调用 filterSet 方法。 ajax 调用导致此脚本回显到页面上的 div，在 ajax 调用成功回调时调用 filterSet()。

echo '
            <script type="text/javascript">
            function locateSpecific(){

            scale = 1;
            height =' . $height . '
            width =' . $width . '

            var imageUrl = "' . $imageURL . '";
            var bounds = new L.LatLngBounds([0, 0], [height / scale,width / scale]);

            map.removeLayer(markerGroup);

            L.imageOverlay(imageUrl, bounds, { noWrap: true, maxZoom: 3, minZoom: -3 }).addTo(map);

            }

            filterSet('.$loc.');

            </script>

            ';

Answer 1

使用函数作为过滤方法的参数：

function filterSet(optValue){
    $("#mySelect option")
        .filter(function () { return $(this).val() == optValue; })
 .prop('selected',true)
}

filterSet('oak');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
        <option value = 'all' selected> Ward </option>
        <option value = 'maple'> Maple </option>
        <option value = 'oak'> Oak </option>
        <option value = 'w3'> Ward 3 </option>
        <option value = 'w4'> Ward 4 </option>
        <option value = 'w5'> Ward 5 </option>
        <option value = 'w6'> Ward 6 </option>
</select>

Answer 2

你的问题出在PHP代码上。您没有引用传递给函数的字符串，因此它认为它是一个引用。

解法：

这里是错误的行：

filterSet('.$loc.');

您需要确保在其周围输出引号：

filterSet("'.$loc.'");

解释：

当 $loc 设置为字符串 "maple" 时，它将向网络浏览器输出以下字符串。

filterSet(maple);

javascript 解释器将尝试查找变量 maple 而不是使用字符串 "maple"。然后它会抛出一个引用错误，因为它找不到它。

使用更新后的代码，PHP 将改为发送以下内容。

filterSet("maple");

因为这是一个字符串，所以它现在可以按预期工作。

Javascript jQuery - selecting select 框选项仅有时有效

Javascript jQuery - selecting select box option only works sometimes

javascript

php

jquery

html-select