Javascript 更改选择框选项文本

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

代码：

HTML

---

您可以将需要更改其文本的类添加到

，如：

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

当存在文件数据属性时，文本将发生更改，并在第一个

选项上添加类“hide”。之后，如果所选选项的类为“隐藏”，则会更改文本并删除该类

另外，我使用的是
var$this=$（this）
缓存jQuery变量，因为最好不要在每次需要时都使用脚本查找它们。
我认为您正在尝试进行多次选择，以隐藏已选择的数据。好的，为了给您的用户一个良好的视图体验（您的示例对于多次选择非常枯燥-演示），请使用以下jquery库：。无论是用ajax加载它（包括示例），我总是使用它进行多次选择。看一看。
如果我在你的问题中添加最后一行，并创建一个小提琴，这就行了
<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");

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

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();
}