자바 스크립트에서 선택 항목을 다른 항목으로 이동

텍스트 상자와 두 개의 목록 상자가 있습니다.자바 스크립트에서 선택 항목을 다른 항목으로 이동

첫 번째 목록 상자는 텍스트 상자에 입력 된 내용을 기반으로 데이터베이스에서 채워집니다. 어떤 단추를 눌렀는 지에 따라 목록 상자간에 항목을 이동해야합니다.

그러나 지금은 일단이 작업을 수행하면 두 목록이 모두 지워집니다.

왜 그런지 알 수 있습니까? 효과적으로 두 목록을 삭제 - 다음

는

자바 스크립트

$('#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

시도를 다음 코드를 추가합니다 : 그 시도 selected' –

- 공간을 제거하고 루프가 전혀 실행되지 않습니다. –

한가지 더 잊어 버렸습니다 :'#lstMRN option : selected' .. select가 아닌'option's 태그를 찾습니다. –

양식이 제출되고 있었다위한 HTML이다. . form 태그를 다음과 같이 변경하십시오.

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

는 공간`#lstMRN 제거 스크립트 파일에

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

출처

2016-11-10 17:04:01

자바 스크립트에서 선택 항목을 다른 항목으로 이동

답변

관련 문제