JavaScript를 사용하여 전체 페이지를 새로 고치지 않고 div 태그를 업데이트하십시오.

Question

HTML 및 JQuery를 사용하여 사용자 정의 가능한 드롭 다운 목록을 개발 중이며,이 드롭 다운 목록에는 숨겨진 HTML div 태그와 입력 텍스트 요소가 포함되어 있습니다. 사용자가 입력 요소를 클릭하면 jquery 코드는 숨겨진 div 태그를 표시하고 숨겨진 div 태그 안에 포함 된 목록 항목 중 하나를 선택할 수있게합니다. 사용자가 원하는 항목을 선택하면 JavaScript 코드가 실행되고 선택한 항목이 텍스트 요소에 반영됩니다.

<input type="text" readonly="true" class="reg-content-datacell-textfield" style="cursor:pointer;width:270px;float:left;display:inline-block" id="txtSector" name="txtSector" /> 
<br /> 
<div id="ddlSector" style="left:26px;" class="ddlist"> 
<ul> 
    <% 
     MainDatabaseOperationsClass.DatabaseOperations databaseOperations = new MainDatabaseOperationsClass.DatabaseOperations();//db connection class 
     string sqlStatement = "select * from Dbtsniper02.dbo.Sectors";//get all database sectors 
     System.Data.SqlClient.SqlDataReader sqlDataReader = databaseOperations.getDataFromDBAsSQLDataReader(sqlStatement);//execute sql statement 
     while (sqlDataReader.Read()) 
     { 
    %> 
    <li class="ddlListSector"><% Response.Write("(" + sqlDataReader[0].ToString() + ") " + sqlDataReader[1].ToString()); %></li> 
    <% 
     } 
    %> 
    </ul> 

자바 스크립트 코드 : 내가 다른 사람을했습니다 내가 그들의 항목 데이터를 업데이트 할 수있는 방법 위의 하나처럼 드롭 다운 목록을 경우

$(document).click(function (event) { 
if ($(event.target).parents().index($('#ddlSector')) == -1) { 
      if ($('#ddlSector').is(":visible")) { 
    $('#ddlSector').slideToggle(); 
}}; 
$(document).ready(function() { 
$("#txtSector).click(function (e) { 
      $("#ddlSector").slideToggle(); 
      e.stopPropagation(); 
      return false; 
     }); 
$("#ddlSector").click(function (e) { 
      //disallow hide the current drop down list when you click on it direcly 
      e.stopPropagation(); 
      return false; 
     }); 
     $(".ddlListSector").click(function (e) { 
      //relect you selection of the drop down list to the parent input text field 
      if ($('#ddlSector').is(":visible")) { 
       document.getElementById('txtSector').value = ''; 
       document.getElementById('txtSector').value = $(this).html(); 
       $('#ddlSector').slideToggle(); 
      } 
     });}); 

지금, 내 질문은 여기에 HTML 코드는 위의 드롭 다운 목록에서 사용자 선택에 따라. 나는 원하는 드롭 다운 목록과 관련된 텍스트 요소의 값에 따라 SQL 문을 변경하여 처리 할 것이지만 사용자가 div 태그 컨텐트를 업데이트하는 경우 이벤트를 트리거 할 수있는 방법을 모르겠습니다. 목록 항목

드롭 다운은 내가보기 엔 해요 당신이 ddlListSector 클릭 이벤트 리스너 내부 AJAX 호출을 사용하려면 같은

Answer 1

그것은 소리 귀하의 협조에 감사드립니다, 대단히 감사합니다. 값을 선택하고 원하는 값 목록을 리턴 할 서버 파일을 작성하십시오 (아마도 sql 명령을 사용하여). AJAX는 프론트 엔드의 사용 방법에 따라 일반 텍스트, JSON 또는 전체 마크 업을 반환 할 수 있습니다. AJAX 호출의 성공 콜백에서, 다른 방울의 내용을 업데이트하십시오. 이미 jQuery를 사용하고있는 것처럼 보이므로 their docs을 권장합니다.