[英]Change select box option text
我正在开发一个ajax选择框,将文件内容加载到最近的div区域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");
您可以向需要更改其文本的<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
上添加“hide”类。 之后,如果所选选项具有“隐藏”类,则会更改文本并删除该类。
另外,我正在使用var $this = $(this);
缓存jQuery变量,因为每次需要时都不要让脚本查找它们。
我认为您正在尝试进行多项选择,这会隐藏已选择的数据。 好吧,为了给你的用户提供良好的视图体验(你的例子对于多个选择非常沉闷 - 演示),请使用这个jquery库: 选择 。 无论是否加载ajax(包括示例),我总是使用它进行多项选择。 看一看。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.