Disabling SelectBoxIt switches selected option text back to defaultText

[rwkiii]

I think/hope this is my last issue Greg. ;)

I use the defaultText setting as somewhat of a label for my SelectBoxIt controls. So for example, one of my SelectBoxIt controls contains "Country:" as its text when first instantiated.

A user then clicks on the dropdown and selects a country, for example "United States" and this value then replaces "Country:"

After all of the form field values are entered/selected, the user clicks on the Submit button and at that time I want to disable all controls in the form. The following line of code:

$("select#ddCountry").selectBoxIt(false);

causes the SelectBoxIt control to revert back to the defaultText setting of "Country".

Is there a setting I am missing to prevent the displayed text from reverting back to defaultText rather than continuing to display the user's selected option? I've researched the documentation, but I don't see any settings that would effect this.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/8313116-disabling-selectboxit-switches-selected-option-text-back-to-defaulttext?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github).

[gfranko]

This also looks like a SelectBoxIt bug. Good catch! I will fix this in the next release.

For the time being, you have two options:

Programmatically set the current option using the selectOption() method. Like this:

$("select#ddCountry").selectBoxIt('disable');
$("select#ddCountry").selectBoxIt('selectOption', $("select#ddCountry").val());

OR

Stop using the defaultText option and instead create an HTML option as your first option (with the text that you would like to show up) and set the showFirstOption option to false.

[rwkiii]

Maybe I'm not doing this right. I have created a function that populates the dropdowns dynamically in response to receiving Ajax responses. Your second option above won't work for me since I set do a .html('') when the dropdown is called to clear the previous options. Here is my function:

    // Fill dropdown listbox
    function FillDropdown(ddid, list, selectedid) {

        var selectBox = $("select#" + ddid);

        selectBox.html("");
        selectBox.selectBoxIt('disable');

        selectBox.append('<option value="0">placeholder</option>');

        var defaultText = "";
        switch (ddid) {
            case 'ddDrinkType':
                defaultText = "Type of Drink";
                break;
            case 'ddCountry':
                defaultText = "Country:";
                break;
            case 'ddStateProvince':
                defaultText = "State:";
                break;
            case 'ddActivities':
                defaultText = "Activity:";
                break;
        }

        if (list) {

            if (list.length > 1) {
                selectBox.selectBoxIt('enable');
            }

            $.each(list, function (index, value) {

                var selected = "";

                if (selectedid == value.Id.toString() || list.length == 1) {

                    // Set return value
                    selectedid = value.Id.toString();

                    // Append option - selected
                    selectBox.append('<option value="' + value.Id.toString() + '" SELECTED>' + value.Name + '</option>');
                    selectBox.data("selectBox-selectBoxIt").selectOption(selectedid);

                    defaultText = "";
                }
                else {
                    // Append option - unselected
                    selectBox.append('<option value="' + value.Id.toString() + '">' + value.Name + '</option>');
                }
            });
        }

        selectBox.selectBoxIt({ defaultText: defaultText });
        // Temporary fix. Overcomes issue #242 (Github)
        selectBox.selectBoxIt('selectOption', $("select#" + ddid).val());

        selectBox.data("selectBox-selectBoxIt").refresh();

        return selectedid;
    };

How is my function interfering with success using your first workaround?

Thanks.

[gfranko]

Have you tried calling the SelectBoxIt disable() method before you empty the HTML contents of the select box? Also, this is unrelated, but you may want to look at the SelectBoxIt API for dynamically adding/removing options from your drop downs. It is a bit more elegant than the way you are doing it. Up to you. http://gregfranko.com/jquery.selectBoxIt.js/#PopulateOptions