asked on

dropdown list and style sheet

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

leakim971

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

lulu50

ASKER

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

lulu50

ASKER

can we just clone the style ?

this is the second image
popup-window.png

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

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

leakim971

what was wrong with my last code?

lulu50

ASKER

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

leakim971

maybe you miss a comment. the last code remove the previous multiselect

lulu50

ASKER

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

lulu50

ASKER

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

lulu50

ASKER

<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

lulu50

ASKER

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

lulu50

ASKER

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

lulu50

ASKER

Thank you

lulu50

ASKER

Thank you