아약스를 사용하여 채워지는 다른 선택 상자에서 div를 채우는 중

ajax을 사용하여 채워지는 두 개의 선택 상자가있는 웹 페이지를 만들고 있습니다. ajax을 사용하여 선택 상자 하나의 값을 사용하여 선택 상자 2를 채울 수 있습니다. 하지만 div의 현재 값을 사용하여 채울 수는 없습니다.아약스를 사용하여 채워지는 다른 선택 상자에서 div를 채우는 중

이것은 내가 지금까지 한 것입니다.

<tr> 
     <td>Product</td> 
     <td><select name="selProduct" id="selProduct" onchange='loadXMLDoc();' > 
      <option value="-1"> Select Product</option> 
      <option value="0"> JSA Three Wheelers</option> 
      <option value="1"> Rotavators</option> 
      <option value="2"> ACE Tractors</option> 
      <option value="3"> BCS Reaper Binder</option> 
      <option value="4"> Lubi Pumps</option> 
      <option value="5"> New Golden Punjab Thresers</option> 

      </select> 
     </td> 
     </tr> 
     <tr> 
     <td>Model</td> 
     <td> 
      <div id="myDiv"> 
      <select name="selModel" id="selModel" onchange='loadXMLDoc1();'> 

      <option value="-1">select Model</option> 
      </select> 
      </div> 



     </td> 
     </tr> 
     <tr> 
     <td> 
     <div id="divRate"> 

     </div> 
     </td></tr>

나는 기능 loadXMLDoc()를 사용하여 selModel 선택 상자를 채울 수 있어요. 이제 selModel에서 선택한 모델의 가격을 loadXMLDoc1()을 사용하여 가져 오려고합니다. 여기에 함수가 있습니다. 내가 loadXMLDoc1() 기능은 목록 후 두 번째 선택 상자의 onchange 이벤트를 해고 드릴 수 없습니다

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 
<% String selModel= request.getParameter("selModel"); 
String selProduct= request.getParameter("selProduct"); 
int valProduct= Integer.parseInt(selProduct); 
int valModel= Integer.parseInt(selModel); 
%> 

<%if(valProduct ==0 && valModel==1){ %> 
<input type="text" value="173000" readonly="readonly"> 
<%} 
else if(valProduct ==0 && valModel==2){ %> 
<input type="text" readonly="readonly" value="183000"> 
<%} 
else if (valProduct==1 && valModel==1){%> 
<input type="text" readonly="readonly" value="400000" > 


<%} 
else if (valProduct==1 && valModel==2){%> 
<input type="text" readonly="readonly" value="450000"> 

<%} %> 


</body> 
</html>

로

function loadXMLDoc() 
{ 
    function byId(e) {return document.getElementById(e);} 
    var sel=byId('selProduct'); 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
    { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
    xmlhttp.open("GET","NewFile.jsp?str="+sel.value,true); 
xmlhttp.send();

}

function loadXMLDoc1() 
{ 
function byId(e) {return document.getElementById(e);} 
var selModel=byId('selModel'); 
var selProduct=byId('selProduct'); 

var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("divRate").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","selPrice.jsp?selProduct="+selProduct.value+"selModel="+selModel.value,true); 
xmlhttp.send();

}

파일 selPrice.jsp입니다 ajax를 사용하여 채워집니다. 안내해주세요. 감사합니다. .

이 코드가 작동하는 것 같군

출처

2014-10-15 Piyush Kumar

두 번째 목록을 채운 직후에 onchange를 등록하려고 시도 했습니까? document.getElementById ('selModel'). onChange = loadXMLDoc1; 그게 문제인지는 잘 모르겠지만 시도해 볼 가치가 있습니다. –

...이 경우

function loadXMLDoc() { 
document.getElementById("selModel").innerHTML = '<option value="A">A</option value="B">B<option value="C">C</option><option value="D">D</option>'; 
} 

function loadXMLDoc1() { 
    document.getElementById("divRate").innerHTML = document.getElementById("selModel").value; 
}

http://jsfiddle.net/qL36s37a/

가 여전히 작동하지 않는 자바 스크립트

샘플 더 나은 당신은 jQuery를 함께 가서) (.live 사용 또는 .on() 메서드를 사용하면 동적으로 포함 된 요소에 이벤트를 발생시킬 수 있습니다.

출처

2014-10-15 17:37:39

아약스를 사용하여 채워지는 다른 선택 상자에서 div를 채우는 중

답변

관련 문제