Jquery 3 comboxboxes 두 세트 - 다른 하나를 듣고 집합

나는 두 가지 간단한 전화를 받고 다른 파일에서 HTML을 반환하는 이상한 문제가 있습니다. 내가받는 HTML에는 3 개의 combox가 있고 하나의 combox를 선택하는 이벤트는 other로 채워집니다. 모든 것은 잘 작동합니다.Jquery 3 comboxboxes 두 세트 - 다른 하나를 듣고 집합

받는 HTML을 DIV에 추가하면됩니다. 하지만 파일을 두 번 호출하여 두 div에 추가하면됩니다. 첫 번째 세트에서 하나의 콤보 박스를 선택하면 두 번째 세트도 변경됩니다. 첫 번째 3 세트의 상자에있는 이벤트가 두 번째 세트에서도 자동으로 발생하며이 경우도 마찬가지입니다. 그러나 나는이 두 세트가 독립되기를 바란다.

jQuery를 :

 $.get("cars.php",{Make:'GM', Model:'Chevy', Year:'2009'}, 
       function(percar){ 
       $("#perPlace").append(percar); 
      }); 

     $.get("cars.php",{Make:'Honda', Model:'Civic', Year:'2008'}, 
       function(curcar){ 
       $("#curPlace").append(curcar); 
      });

HTML :

<div id="perPlace" > 
</div> 

<div id="curPlace"> 
</div>

HTML을 반환 (간단하게하기 위해 CSS와 값을 잘라 내기) : 우리는 같은 문제에 직면했다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <title>Select test</title> 
      <script type="text/javascript" src="../jquery-1.5.1.min.js"></script> 
      <script type="text/javascript" charset="utf-8"> 
      $(function(){ 
       $("select#make").change(function(){ 
       var makeVar = $(this).val(); 
       var jqxhr =$.getJSON("select.php",{make: makeVar, ajax: 'true'}, function(j){ 
        var options = ''; 
        for (var i = 0; i < j.length; i++) { 
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
        if(i==0){ 
        populateYear(j[i].optionValue); 
        } 

        } 
        $("select#model").html(options); 
       }).error(function(xhr, ajaxOptions, thrownError) { alert(xhr.statusText); }) 
       }) 



       $("select#model").change(function(){ 
       populateYear($(this).val()); 
       }) 
      }) 



      function populateYear(modelID){ 
       $.getJSON("select.php",{model: modelID, ajax: 'true'}, function(j){ 
           var options = ''; 
           for (var i = 0; i < j.length; i++) { 
           options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
           } 
           $("select#year").html(options); 
          }) 

      } 


    </head> 



    <div class="field_container"> 
     <select id="make"> 

      <option value="1">GM</option> 
      <option value="2">HONDA</option> 
      <option value="3">FORD</option> 
     </select> 
     <select id="Model"> 
      <option value="1">Chevy</option> 
      <option value="2">Pontiac</option> 
     </select> 

     <select id="Year"> 
      <option value="1">2000</option> 
      <option value="2">2001</option> 
      <option value="3">2002</option> 
     </select> 
      </div>

출처

2011-03-16 Bujji

반환되고 추가되는 HTML을 게시 할 수 있습니까? – CraigKerstiens

응답 해 주셔서 감사합니다. – Bujji

이것이 우리가 해결 한 방법입니다.

우리는 요청에 컨트롤을 접두사 (예. GetCar(Honda)이 Honda_Make, Honda_Model, Honda_Year로 컨트롤을 앞에됩니다). 이를 통해 MVC를 사용할 때마다 고유 한 컨트롤을 얻을 수있었습니다. 우리가 이벤트를 처리하는 방법은 함수를 컨트롤에 전달하는 것입니다 (예 : PopulateYear(YearDropdown); 및 그 함수를 호출하는 방법은 PopulateYear($("#Honda_Year")입니다).

출처

2011-03-16 16:29:44 Raja

답장을 보내 주셔서 감사합니다. 원본 파일의 중복 파일을 만들었지 만 두 파일에서 같은 이름을 사용하더라도 여전히 작동하지 않았습니다. 나는 당신의 접근 방식을 따를 것입니다. 다시 한 번 힌트를 주셔서 감사합니다. – Bujji

"계단식 드롭 다운"을 만들려고하십니까? 데이터베이스에 연결하고 ... "연도"선택을 기반으로 모든 "제조사"를 표시 한 다음 이전의 "모델"을 기반으로 한 모든 "모델"을 표시하는 경우 몇 가지 Google 검색을 수행하십시오. 년 "과"선택 "선택 ... 나는 이것의 여러 가지 버전이 있었지만, 마침내 매우 복잡한 자동차 선택기 시스템을 생각해 냈습니다 ... http://pulsedrivers.com에 살고 있습니다 :) 계단식 드롭 다운을 검색하면 많은 것을 발견 할 수 있습니다. 그렇게하는 방법에 대한 훌륭한 예제가 있습니다.

출처

2011-08-16 23:16:28

Jquery 3 comboxboxes 두 세트 - 다른 하나를 듣고 집합

답변

관련 문제