CODEWITHSUNDEEP
jqueryjspmulti-selectbootstrap-multiselectjquery-ui-multiselect
Souporno Ghosh
Souporno Ghosh

Reputation: 1

jQuery Multi-select remove other selected options if "ALL" option selected

I've something like this:

var myThing = {

   *... (some functions) ...*

   var callBack = $.Callbacks();
   callBack.add(myThing.populateSome);
   dataProvider.callWebService('/getMyHtml', 'GET', callback);
 });
},

populateSome : function(ids) {
   var myHtml = '';

   $.each(ids, function(index, ids) {
   myHtml += '<option value="'+ ids + '">' + ids + '</option>';
   });

   myHtml += '<option value="ALL">All Ids</option>';

   $(#initialList).html(myHtml);
   $(#initialList).multiselect();
   $(#List_to).html('');
   $(#List_to).multiselect();

   var callBack = $.Callbacks();
},

I'm doing some HTTP GET which provides me with ids 100, 101, 102, 103.

My JSP part of code:

...
<div class="form-group">
<span class="input-group-addon"><s:message code="send.some.label"/></span>
<span style="padding-left: 99px"></span>

<select id="initialList" name="ids" multiple="multiple" size="10" class="myselect"></select>
<div id="actionButtonMultiSelect" class="btn-group">
   <button id="List_rightSelected" class="btn"><b>&gt;</b></button>
   <div style="padding-top: 10px"></div>
   <button id="List_leftSelected" class="btn"><b>&lt;</b></button>
</div>
<select name="to" id="List_to" size="10" class="myselect" multiple></select>
</div>
<div style="padding-top: 20px"></div>
...

In my UI screen, two areas appear with initialList and List_to. When I select 101 and move it, initialList appears like: All Ids, 100, 102, 103 and List_to appears like: 101

When I select 100 and move it, initialList appears like: All Ids, 102, 103 and List_to appears like: 100, 101

On selecting, any option, (say 101) from List_to, it goes back to my original list. So, my initialList appears like: All Ids, 101, 102, 103 and List_to appears like: 100

I want to code in a way so that, when the scenario is something like: initialList appears like: All Ids, 102, 103 and List_to appears like: 100, 101 Now if the user selects All Ids, then it -> initialList appears like: 100, 101, 102, 103 and List_to appears like: All Ids

Upvotes: 0

Views: 576

Answers (1)

Kinglish
Kinglish

Reputation: 23664

Your code shown doesn't represent the UI display of showing the checkbox values out of sequence, but it seems like the answer is to run the values through a sorting mechanism before displaying them.

Here, I've separated out the numbers from the strings, sorted both then combined them in the format you showed.

let values = ["99", "All Ids", "100", "102", "103", "101"];
let strings = values.filter(isNaN).sort((b, a) => b.localeCompare(a));
let sortedValues = values.filter(Number).sort((b, a) => b - a)
let list = `${sortedValues.join(", ")}`;
if (strings.length>0) list += ` --- ${strings.join(", ")}`
$('#results').html(list)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='results'></div>

Upvotes: 0

Related Questions