jquery - up and down button should work only if either one item is selected or in case of multiple items only if consequtive items are selected -
this code used move item , down list using 2 buttons. in case of multiple select need move items , down list if 2 or more items selected consecutive. should treat elements selected single entity , should not change order. am not able figure out how that. please help.
<!doctype html> <html> <head> <title>ms profile</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script > $(function() { $("#buttonmoveup").click(function() { $("select[id='selectobjchosen'] option:selected").each(function () { itemlist=$('#selectobjchosen'); selected=$(this).index(); if(selected>2) { jquery($(itemlist).children().eq(selected-1)).before(jquery($(itemlist).children().eq(selected))); selected=selected-1; } }); }); $("#buttonmovedown").click(function() { $("select[id='selectobjchosen'] option:selected").each(function () { itemlist=$('#selectobjchosen'); selected=$(this).index(); len=$(itemlist).children().length; if(selected < len && selected>=2) { jquery($(itemlist).children().eq(selected+1)).after(jquery($(itemlist).children().eq(selected))); selected=selected+1; } }); }); }); </script> <body> <div > <select id='selectobjchosen' theme="simple" name="list" multiple="multiple" class="right_select" style="background-color: white; border: 1px solid #01a9db; border-radius: 10px; height: 149px; margin-bottom: 10px; margin-top: 10px; max-height: 270px; overflow-x: auto !important; overflow-y: hidden; padding: 7px; width: 100%;" > <option value='abc'>abc</option> <option value='def'>def</option> <option value='pqr'>pqr</option> <option value='xyz'>xyz</option> <option value='mno'>mno</option> <option value='stu'>stu</option> </select> </div> <div style="width:45%; float:left; height:100px; padding-top: 70px;"> <input type="button" name="^" value="^" id="buttonmoveup"/><br/><br/> <input type="button" name="v" value="v" id="buttonmovedown"/><br/> </div> </body> </html>
how this
i rewrote logic , came this.
code
$(function () { $("#buttonmoveup").click(function () { var selecteditems = $("select[id='selectobjchosen'] option:selected"); selecteditems.insertbefore(selecteditems.first().prev()); }); $("#buttonmovedown").click(function () { var selecteditems = $("select[id='selectobjchosen'] option:selected"); selecteditems.insertafter(selecteditems.last().next()); }); $('#selectobjchosen').change(function () { var selecteditems = $("select[id='selectobjchosen'] option:selected"); var error = 0; if (selecteditems.length > 0) { var prevelem = undefined; selecteditems.each(function (index, value) { if (typeof prevelem != "undefined") { if (typeof $(prevelem).next()[0] != "undefined") { if ($(prevelem).next()[0] != value) { error = 1; } } } prevelem = value; }) } if (error) { $('#buttonmoveup,#buttonmovedown').prop('disabled', true); } else { $('#buttonmoveup,#buttonmovedown').prop('disabled', false); } }) });
Comments
Post a Comment