jquery - Moving entries from one select to another in javascript -
i have textbox , 2 list boxes.
the first list box populated database based on typed in textbox. items should move 1 list box other depending on button pressed.
however @ moment once this, both lists seem cleared.
can see why case.
the following javascript
$('#txtmrn').keyup(function () { var s = $('#txtmrn').val(); var l = s.length; var lst = document.getelementbyid('lstmrn'); if (l > 4) { $.ajax({ url: "http://localhost:52238/patientsgetlike.ashx?mrn=" + s, success: function (result) { lst.innerhtml = ''; $.each(result, function (i, v) { var newoption = document.createelement('option'); newoption.text = v.nhs_patientid + ' - ' + v.nhs_surname + ', ' + v.nhs_firstname; newoption.setattribute('value', v.nhs_patientid); newoption.classname = 'mdl-list__item'; lst.add(newoption); }); componenthandler.upgradedom(lst); } }); } }); $('#btnselect').click(function () { var el1 = document.getelementbyid('lstmrn'); var el2 = document.getelementbyid('lstmrnselected'); $('#lstmrn :selected').each(function (i, selected) { var opt = document.createelement('option'); opt.value = selected.value; opt.text = selected.text; opt.classname = 'mdl-list__item'; el2.add(opt); // selected.remove(); }); }); and html page
<!doctype html> <html> <head> <title>epr document sweep </title> <meta charset="utf-8" /> <link href="https://fonts.googleapis.com/css?family=roboto" rel="stylesheet"> <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-amber.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="styles/styles.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__header-row"> <div class="mdl-layout__title"> epr document sweep </div> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right" id="searchbox"> <label class="mdl-button mdl-js-button mdl-button--icon" for="srchtext"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="srchtext" /> </div> </div> </div> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <!-- navigation. hide in small screens. --> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href=""> <i class="material-icons">link</i> intranet </a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">document sweep</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">add mrns</a> <a class="mdl-navigation__link" href="#">log</a> </nav> </div> <main class="mdl-layout__content"> <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="txtmrn"> <label class="mdl-textfield__label" for="txtmrn">mrn</label> </div> <div style="width:100%;" > <div style="vertical-align:top; display:inline-block;"> <select size="4" name="lstmrn" id="lstmrn" class="mdl-list listbox"></select> </div> <div style="display:inline-block; vertical-align:text-top;"> <button id="btnselect" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored selectbuttons"> > </button> <button id="btndeselect" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored selectbuttons"> < </button> </div> <div style="vertical-align:top; display:inline-block;"> <select size="4" name="lstmrnselected" id="lstmrnselected" class="mdl-list listbox"></select> </div> </div> </form> </main> </div> <script src="https://code.getmdl.io/1.2.1/material.min.js"></script> <script src="scripts/default.js"></script> </body> </html>
the form being submitted - clearing 2 lists. . change form tag following;
<form action="#" id="selectform"> add following code script file
$("#selectform").submit(function (e) { e.preventdefault(); });
Comments
Post a Comment