CODEWITHSUNDEEP
jqueryjquery-chosen
Jaspher J
Jaspher J

Reputation: 29

Am using jquery chosen plugin

From the dropdown list I want only the some part(for eg. AL_Alabhama means i want only AL). i did this using the split function.When I select some value from dropdown,the text box contains the splitted result but the same value is reflected back to the dropdown list.I want the original value in the dropdown .Please suggest some solutions

        $(document).ready(function () {
            var selText;
            $('#locate option').each(function () {
                $(this).attr('name', $(this).text());
            });
                    $('#locate').change(function () {
             //Gets the value for selected option
                    selText = $('#locate option:selected').text();
              //split the value
                     $('#locate option:selected').text(selText.split("_")[0]).trigger('liszt:updated');
                 //trying to add the values again to the dropdown
                    $('#locate').next().click(function () {
                    if (selText == "") {
                        $("#locate option").filter(":contains(" + selText.split("_")[0] + ")").text(selText).trigger('liszt:updated');

                });
        }

Upvotes: 1

Views: 144

Answers (1)

Banana
Banana

Reputation: 7463

look at the line $('#locate option:selected').text(selText.split("_")[0]).trigger('liszt:updated');

lets separate it into 2 parts for convenience:

var splittedText = selText.split("_")[0];
$('#locate option:selected').text(splittedText).trigger('liszt:updated');

do you see what happens? instead of assigning the splitted text to a variable, you set it as a text back to the dropdown.

just assign it to a variable like i showed you above: var splittedText = selText.split("_")[0];

and remove the part .text(splittedText)

so it would look like this:

var splittedText = selText.split("_")[0];
$('#locate option:selected').trigger('liszt:updated');

UPDATE:

triggering the custom event .trigger('liszt:updated'); will only notify the Chosen plugin that you have updated the dropdownlist. if you want to set the text of the textbox separately, you need to just do it manually:

$("#myTextBox").val(splittedText);

as you probably know (or dont), the selector $('#locate option:selected') will return you a list of all selected <option> elements who have a parent with id="locate".

therefore, since most likely you will only have 1 option selected at a time, this will return you the selected option in the dropdownlist.

when you call the function .text() of a jquery object and provide arguments (eg: .text(splittedText)), it will set the text of every element in that list that the jquery selector returns.
if you dont want the select options change their text, do not call .text(splittedText)

Upvotes: 3

Related Questions