在javascript中將條目從一個選擇項移動到另一個選項

我有一個文本框和兩個列表框。在javascript中將條目從一個選擇項移動到另一個選項

第一個列表框是根據文本框中鍵入的內容從數據庫填充的。項目應該從一個列表框移動到另一個列表框，具體取決於按下哪個按鈕。

然而，目前一旦這樣做，那麼這兩個列表似乎被清除。

任何人都可以看到爲什麼是這種情況。

以下是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(); 
    }); 

});

和頁面

<!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. We hide it 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>

來源

2016-11-10 Paul S Chapman

嘗試刪除空間'#lstMRN：試過了selected' –

- 刪除空間和循環根本不會執行。 –

我忘了一件事：'#lstMRN選項：選擇'..您搜索'option's標記而不是select。 –

正在提交表單的HTML - 有效清除兩個列表。。將表單標籤更改爲以下內容;

<form action="#" id="selectForm">

下面的代碼添加到腳本文件

$("#selectForm").submit(function (e) { 
    e.preventDefault(); 
});

來源

2016-11-10 17:04:01

在javascript中將條目從一個選擇項移動到另一個選項

回答

相關問題