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">                             &gt;                                                 </button>                          <button id="btndeselect" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored selectbuttons">                             &lt;                         </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

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more