我正在研究一个将文件内容加载到最近的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");

最佳答案

您可以向<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变量,因为这是一种好习惯,不要在每次需要它们时都要让脚本寻找它们。

关于javascript - 更改选择框选项文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22839376/

10-11 20:34
查看更多