dropdown list and style sheet

lulu50
lulu50 used Ask the Experts™
on
Hi,

I have a dropdown list on my partial view dialog box

If I remove the class from the <select> and remove the multiselect

my data will get populated but I need to have my style and populate my data

so if I remove from my select this class:
class="btn btn-default dropdown-toggle"
and
remove the multselect function:
//    $('#GroupSelect').multiselect(getGroupOptions(true));

then my select box will get populated but I need my style
how can I have my style and populate my dropdown list?

<script >
    $(document).ready(function () {

        $('#GroupSelect').multiselect(getGroupOptions(true));


   function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'
               
            }
        }


        $("#ConditionSelect").change(function (event) {
           // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    alert(JSON.stringify(json));
                    alert(JSON.stringify(json.length));

// I think the issue is here the way my options are created because this is jquery multiselect and not a regular select 

                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
            });

                        $("#GroupSelect").multiselect('refresh');  //I added a refresh but it didn't work

        });

Open in new window



           <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>

Open in new window

popup-window.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
use :

    $(document).ready(function () { // this is your line 2

        var clone = $('#GroupSelect').clone(true, true); // https://api.jquery.com/clone/
        $('#GroupSelect').multiselect(getGroupOptions(true));

        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }

        $("#ConditionSelect").change(function (event) {
            // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({method: method, url: action, data: data}).done(
                function (json) {
                    $('#GroupSelect').replaceWith(clone); // https://api.jquery.com/replaceWith/
                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });// this is the line 42

Open in new window

lulu50Web application

Author

Commented:
now I got two of the same dropdown list

one it's populating the data
one is empty

Attached a picture

How should I fix it

I just need the clone but if I remove the original one than it has nothing to clone
lol lol
popup-window.png
lulu50Web application

Author

Commented:
can we just clone the style ?

this is the second image
popup-window.png
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Multitechnician
Top Expert 2014
Commented:
we just need to remove it :
                    $("#ms-GroupSelect").remove();


<script>
    $(document).ready(function () {

        var clone = $('#GroupSelect').clone(true, true); // https://api.jquery.com/clone/
        $('#GroupSelect').multiselect(getGroupOptions(true));

        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }

        $("#ConditionSelect").change(function (event) {
            // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({method: method, url: action, data: data}).done(
                function (json) {
                    $("#ms-GroupSelect").remove();
                    $('#GroupSelect').replaceWith(clone); // https://api.jquery.com/replaceWith/
                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });

Open in new window

lulu50Web application

Author

Commented:
I did this:

It works with the below changes but when I change my selection from "px" to "dx" it should trigger my on change event
but it's not

This event it only trigger when I upload the dialog box if then change it again my GroupSelect won't change.

 $("#ConditionSelect").change(function (event) {



 var clone = $('#GroupSelect').clone(true, true);
        //$('#GroupSelect').multiselect(getGroupOptions(true));     //I removed this 
        $('#GroupSelect').hide();                                                             //hided my GroupSelect 

        $("#ConditionSelect").change(function (event) {
            // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    //$("#GroupSelect").remove();                                    //Removed my remove 
                    $('#GroupSelect').replaceWith(clone);
                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
what was wrong with my last code?
lulu50Web application

Author

Commented:
leakim971

yes, I'm going crazy with this.

when I did your last code.
I got two dropdown list

first dropdown list shows the px but when I inspect the element I see duplicate data getting populated
second dropdown list is empty.

Attached are images of the result.
popup-window.png
popup-window2.png
leakim971Multitechnician
Top Expert 2014

Commented:
maybe you miss a comment. the last code remove the previous multiselect
lulu50Web application

Author

Commented:
oh it's not duplicating

the data is getting appended to the "GroupSelect" every time  I change my selection

so if I select "px" then px list will get populated to the "GroupSelect"
then I select "dx" then px and dx list will get populated to the "GroupSelect"

on the screen I see two dropdown list one populated with px and the second one is empty
when I change my selection I still see the px list in the second dropdown but when I inspect the element I see that it append the data to the list.

I attached an image.
popup-window2.png
popup-window3.png
popup-window.png
lulu50Web application

Author

Commented:
I changed this:
$("#ms-GroupSelect").remove();

to this:
$('#GroupSelect').remove();

it removed the clone select

I tried to inspect the element and I don't see any select

Attached an image
popup-window.png
popup-window2.png
lulu50Web application

Author

Commented:
<script >
    $(document).ready(function () {

        var clone = $('#GroupSelect').clone(true, true); 
        $('#GroupSelect').multiselect(getGroupOptions(true));


        $("#ConditionSelect").change(function (event) {
            // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').remove();
                    //$("#ms-GroupSelect").remove();
                    $('#GroupSelect').replaceWith(clone); // https://api.jquery.com/replaceWith/
                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });


  function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }





    });


</script>

Open in new window

lulu50Web application

Author

Commented:
I did empty instead of remove

 $('#GroupSelect').empty();

it works when I inspect the element now the dropdown list doesn't append.

but I still have two dropdown how can I remove the original one ?
I want to keep the clone and remove the original one


and when I do the inspect element I see the data changes but I don't see it on the screen I have to go to inspect element to see it



$("#ConditionSelect").change(function (event) {
            // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    //$('#GroupSelect').remove();
                    //$("#ms-GroupSelect").remove();
                    $('#GroupSelect').replaceWith(clone); // https://api.jquery.com/replaceWith/
                    for (var i = 0; i < json.length; i++) {
                        $('#GroupSelect').append('<option value="' + json[i].Value + '">' + json[i].Text + '</option>');
                    }
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });

Open in new window

lulu50Web application

Author

Commented:
I changed my code

with the code below, I'm very close to get it to work

I only have one problem
I only see my selected changes when I inspect the element
it doesn't show on the screen

var clone = $('#GroupSelect').clone(true, true); 
        $('#GroupSelect').multiselect(getGroupOptions(true));

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });
                    $('#GroupSelect').multiselect(getGroupOptions(true));       
                });
        });

Open in new window

popup-window.png
popup-window2.png
lulu50Web application

Author

Commented:
Thank you
lulu50Web application

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial