Change select box option text

Question

I'm working on an ajax select box that loads file content into the closest div area Demo. I'm using the script below to change the first option text "Select" to "Hide" when the ajax content is loaded.However, I can't get the "Hide" text to change back to "Select" after on clicking it.

Code:

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>

Should I use this line in a function?

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

If I add the last line, in your Question, and create a fiddle this works [Demo](http://jsfiddle.net/szHZv/) — Wilfredo P, Apr 03 '14 at 13:43

score 2 · Accepted Answer · answered Apr 03 '14 at 13:52

You can add a class to the <option> that needs its text to be changed, like:

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

And then the Js would be

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

When there's a file data attribute, the text changes and class "hide" is added on the first option. After that, if the selected option has the class "hide", the text is changed and the class is removed.

Also, I'm using var $this = $(this); to cache the jQuery variable, since it's a good practice to not hace the script look for them every time they are needed.

score 1 · Answer 2 · answered Apr 03 '14 at 14:36

I think you are trying to do multiple selection which hides the one already selected data. Well, in order to give your users a good view experience(your example is quite dull for multiple selection - the demo), make use of this jquery library: chosen. I have always use this for multiple selection whether loading it with ajax (examples included). Take a look.

Change select box option text

2 Answers2