2014-04-03 240 views
1

我正在处理将文件内容加载到最近的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"); 
+1

如果我添加最后一行,在你的问题,并创建一个小提琴这个作品[演示](http://jsfiddle.net/szHZv/) –

回答

2

您可以将类添加到需要它的文本<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变量,因为每次需要时都不要为脚本寻找它们是一种很好的做法。

1

我认为你正在尝试做多选择隐藏已经选择的数据。那么,为了给你的用户提供良好的视图体验(你的例子对于多选 - 演示非常枯燥),请使用这个jQuery库:chosen。我总是使用它来进行多重选择,无论是否加载ajax(包含示例)。看一看。