2011-04-29 4 views
0

나는 세 가지 선택 상자 섹션을 가지고, 그들은 어쨌든 모든 주 또는 지방 또는 지역은 ...입니다여러 세트 = 지금

내 양식은 ...이처럼

나라 [] 국가/지방은 []

나는 그런 미국 (뉴욕, 플로리다) 캐나다 (알버트, 노바 스코샤) 멕시코 (로 이전에 다른 나라를 선택하여시 /도 상자의 기본 정보를 변경 유카탄, 노스 렌).

선택 상자 멕시코, 미국, 캐나다의 각 섹션은 모두 주 /도로서 데이터베이스에 제출할 동일한 이름을 갖습니다. 그러나 나는 다른 나라의 다른 선택을 유지한다고 믿습니다. 예를 들어, 알라바마를 선택하고 캐나다로 전환하고 앨버타를 선택하면 두 가지를 모두 저장하려고합니다. 단 하나만 선택하게하려면 어떻게해야합니까?

정말 고마워요!

오, 여기

$(document).ready(function(){ 
$("#country").change(function() 
{ 


$("#usStates").hide(); 
$("#caStates").hide(); 
$("#mexStates").hide(); 

if ($("#country").val() == 'United States'){ 
$("#usStates").show(); 
$("#caStates").hide(); 
$("#mexStates").hide(); 
$("#state1").val(''); 
} 
if ($("#country").val() == 'Canada'){ 
$("#caStates").show(); 
$("#usStates").hide(); 
$("#mexStates").hide(); 
$("#state1").val(''); 
} 
if ($("#country").val() == 'Mexico'){ 
$("#mexStates").show(); 
$("#caStates").hide(); 
$("#usStates").hide(); 
$("#state1").val(''); 
} 

}); }); 

<div id="caStates" style="display: none;"> 
<div class="leftform">State/Province:</div> 
<div class="rightform"><select class="select" style="width: 150px;" id="state1" name="state" size="1"> 
<option value=""></option> 
<option value="Alberta">Alberta</option> 
<option value="New Brunswick">New Brunswick</option> 
<option value="Nova Scotia">Nova Scotia</option> 
<option value="Prince Edward Island">Prince Edward Island</option> 
<option value="British Columbia">British Columbia</option> 
<option value="Newfoundland">Newfoundland</option> 
<option value="Ontario">Ontario</option> 
<option value="Quebec">Quebec</option> 
<option value="Manitoba">Manitoba</option> 
</select></div><br clear="all"/> 
</div> 

<div id="mexStates" style="display: none;"> 
<div class="leftform">State/Province:</div> 
<div class="rightform"><select class="select" style="width: 150px;" id="state1" name="state" size="1"> 
<option value=""></option> 
<option value="Baja California">Baja California</option> 
<option value="Central Mexico">Central Mexico</option> 
<option value="Gulf of Mexico">Gulf of Mexico</option> 
<option value="Northern Mexico">Northern Mexico</option> 
<option value="Mexico Pacific Coast">Mexico Pacific Coast</option> 
<option value="Yucatan">Yucatan</option> 
</select></div><br clear="all"/> 
</div> 

답변

1

문제는 제출하고 싶지 않은 컨트롤을 해제해야한다는 것입니다. 이 하나 스크립트를 교체하고 모든 will'be 고정 : (지금 조금 짧다 외에)

$(document).ready(function(){ 
     $("#country").change(function(){ 
     //We first disable all, so we dont submit data for more than 1 country 
     $("#usStates, #caStates, #mexStates").hide().find("#state1").attr("disabled", true); 
     var $divSelectedStates; 
     if ($("#country").val() == 'United States') 
      $divSelectedStates = $("#usStates");      
     if ($("#country").val() == 'Canada') 
      $divSelectedStates = $("#caStates");   
     if ($("#country").val() == 'Mexico') 
      $divSelectedStates = $("#mexStates"); 
     //We now enable only for the selected country   
     $divSelectedStates.show().find("#state1").attr("disabled", false).val(''); 
     }); 
    }); 

이 코드의 주요 변화, 우리가 비 선택 선택, 을 해제 걸이다 그래서 그들은을 제출하지 않습니다.

그리고 조언, 동일한 페이지에서 반복 된 ID를 사용하지 마십시오. 못. 이것은 문제를 일으키기도했지만, 이제는 내가 보여준 코드로 수정되었습니다.

호프가 도움이 되었으면 좋겠다. 건배 :

1

당신은 단지 하나의 <select id="state" name="state">을 사용하고, 그 <select>로 일부는 <select id="country" name="country"> 필드에 onchange 이벤트가 발생 할 때마다 옵션의 다른 세트를로드해야합니다 ... 아래의 일부 코드이다.

JSON 파일의 변경 사항을로드 할 수 있습니다.이 파일은 서버에 이미 준비되어 있습니다.

+0

지금 나는 3 세트의 선택을 표시하도록 설정했습니다 : 아무도 선택하지 않고 국가를 선택하면 적절한 것을 설정합니다(). 이전 선택 상자에 따라 다른 선택 상자를로드하기 위해 onchange 사용에 대한 팁? – Visin