更改选择框选项文本答案

【问题标题】：Change select box option text更改选择框选项文本
【发布时间】：2014-04-03 13:32:57
【问题描述】：

我正在开发一个将文件内容加载到最近的 div 区域的 ajax 选择框 Demo。当加载 ajax 内容时，我正在使用下面的脚本将第一个选项文本“选择”更改为“隐藏”。但是，我无法将 “隐藏” 文本更改回点击后“选择”。

代码：

var area = $(".selectboxarea");
$(".searchselectbox").on('change', function (e) {
    area.empty();
    var selected = $(this).find('option:selected');
    var loadfile = selected.data('file');

    if (loadfile) {    
        $(this).next('.selectboxarea').load(loadfile);
        $(this).find('option:contains("Select")').text("Hide");
    } else {
        window.location.href = $(this).val();
    }
});

HTML

<select class="searchselectbox">
    <option value="#">Select</option>
    <option data-file="fans.php">Fans</option>
    <option data-file="stars.php">Stars</option>

</select>
<div class="selectboxarea"></div>

我应该在函数中使用这一行吗？

$(this).find('option:contains("Hide")').text("Select");

【问题讨论】：

如果我在你的问题中添加最后一行，并创建一个小提琴这工作Demo

标签： javascript jquery html ajax jquery-selectbox

【解决方案1】：

您可以向需要更改其文本的<option> 添加一个类，例如：

<option value="#" class="select">Select</option>

然后Js就是

var $this = $(this);
var selected = $this.find('option:selected');
var loadfile = selected.data('file');

if (loadfile) {    
    $this.next('.selectboxarea').load(loadfile);
    $this.find('.select').text('Hide');
    $this.find('.select').toggleClass('hide');
} else if (selected.hasClass('hide')) {
    selected.text('Select');
    selected.toggleClass('hide');
} else {
    window.location.href = $(this).val();
}

当有文件数据属性时，文本会发生变化，并且在第一个option 上添加“隐藏”类。之后，如果所选选项具有“隐藏”类，则更改文本并删除该类。

另外，我正在使用var $this = $(this); 来缓存 jQuery 变量，因为最好不要让脚本在每次需要它们时都查找它们。

【讨论】：

【解决方案2】：

我认为您正在尝试进行多项选择，以隐藏已选择的数据。好吧，为了给您的用户提供良好的查看体验（您的示例对于多项选择来说非常乏味 - 演示），请使用这个 jquery 库：chosen。我一直使用它来进行多项选择，是否使用 ajax 加载它（包括示例）。看看吧。

【讨论】：