다른 드롭 다운 메뉴의 값 사용

Question

코딩의 초보자이므로이 코드를 완전히 이해하지 못했습니다.
내가 달성하고자하는 것은 다중 드롭 다운 메뉴를 넣고 싶다는 것입니다.

내 코드의 문제점은 특정 드롭 다운 메뉴에서만 값을 허용한다는 점입니다.

내 코드는 사용자가 이전 드롭 다운 메뉴에서 선택한 항목에 따라 지역, 국가 및 주를 선택하는 데 도움이됩니다. 이 코드는 내가 달성하고자하는 것과 유사하기 때문에이 코드를 사용하고 있습니다.

제가 직면 한 문제는 데이터를 사용해야하는 약 8 개의 드롭 다운 메뉴가 있다는 것입니다. 8 개의 지역 드롭 다운, 8 개의 국가 드롭 다운 및 8 개의 국가 드롭 다운이 있습니다. 모두 같은 페이지에 있습니다. 코드를 8 개 넣으면 코드가 작동을 멈 춥니 다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

누군가 저를 도와 줄 수 있습니까? 이 코드입니다 :

<form> 
Region&raquo; <select onchange="set_country(this,country,city_state)" size="1"  name="region"> 
<option value="" selected="selected">SELECT NOTE</option> 
<option value=""></option> 
<script type="text/javascript"> 
setRegions(this); 
</script> 
</select> 
Country&raquo; <select name="country" size="1" disabled="disabled" onchange="set_city_state(this,city_state)"></select> 
City/State&raquo; <select name="city_state" size="1" disabled="disabled" onchange="print_city_state(country,this)"></select> 

<script> 
    //////////////////////////////////////////////////////////////////////////// 
// city_state.js /////////////////////////////////////////////////////////// 
//////////////////////////////////////////////////////////////////////////// 

    var countries = Object(); 

countries['C'] = '|C|Cm|'; 
countries['D'] = '|D|Dm|'; 

//////////////////////////////////////////////////////////////////////////// 

var city_states = Object(); 

//C 
city_states['C'] = '|032010|335553|'; 
city_states['Cm'] = '|335543|'; 
city_states['D'] = '|000232|557775'; 
city_states['Dm'] = '|000231|557765'; 

////////////////////////////////////// ///////////////////////////////// /////////// /////////////////////////////////////////////////////////////////// ///////////////

function setRegions() 
{ 
    for (region in countries) 
     document.write('<option value="' + region + '">' + region + '</option>'); 
} 

function set_country(oRegionSel, oCountrySel, oCity_StateSel) 
{ 
    var countryArr; 
    oCountrySel.length = 0; 
    oCity_StateSel.length = 0; 
    var region = oRegionSel.options[oRegionSel.selectedIndex].text; 
    if (countries[region]) 
    { 
     oCountrySel.disabled = false; 
     oCity_StateSel.disabled = true; 
     oCountrySel.options[0] = new Option('SELECT TYPE',''); 
     countryArr = countries[region].split('|'); 
    for (var i = 0; i < countryArr.length; i++) 
     oCountrySel.options[i + 1] = new Option(countryArr[i], countryArr[i]); 
    document.getElementById('txtregion').innerHTML = region; 
    document.getElementById('txtplacename').innerHTML = ''; 
} 
else oCountrySel.disabled = true; 
} 

function set_city_state(oCountrySel, oCity_StateSel) 
{ 
var city_stateArr; 
oCity_StateSel.length = 0; 
var country = oCountrySel.options[oCountrySel.selectedIndex].text; 
if (city_states[country]) 
{ 
    oCity_StateSel.disabled = false; 
    oCity_StateSel.options[0] = new Option('SELECT TAB',''); 
    city_stateArr = city_states[country].split('|'); 
    for (var i = 0; i < city_stateArr.length; i++) 
     oCity_StateSel.options[i+1] = new Option(city_stateArr[i],city_stateArr[i]); 
    document.getElementById('txtplacename').innerHTML = country; 
} 
else oCity_StateSel.disabled = true; 
} 

function print_city_state(oCountrySel, oCity_StateSel) 
{ 
var country = oCountrySel.options[oCountrySel.selectedIndex].text; 
var city_state = oCity_StateSel.options[oCity_StateSel.selectedIndex].text; 
if (city_state && city_states[country].indexOf(city_state) != -1) 
    document.getElementById('txtplacename').innerHTML = city_state + ', ' + country; 
else document.getElementById('txtplacename').innerHTML = country; 
} 

</script> 

내가 특정 코드를 필요가 있다고 생각하기 때문에 자바 스크립트 섹션에 자바 스크립트 코드를 붙여하지 않은 http://jsfiddle.net/HzJ9J/1/ 에서 업데이트 된 코드를 확인하시기 바랍니다 올바른 장소에서 뛰기. 확실하지 않은 경우 자바 스크립트 섹션으로 이동해야합니다.

Answer 1

'setRegions이 아직 정의되지 않았기 때문에 setRegions(this);에 대한 호출이 실패합니다. 함수 정의가 아직 브라우저에 의해로드되지 않았습니다.

<select onchange="set_country(this,country,city_state)" size="1" name="region" id="region"> 

을 다음 닫는 SCRIPT 태그 앞에 매우 마지막에 setRegions로 통화를 이동 :

나는 당신의 선택에 ID 속성을 추가했다. document.write를 일반 나쁜 생각에 사용

setRegions(document.getElementById("region")); 

및 setRegions에 대한 호출이 라인 밖으로 이동할 때와 같이 작동하지 않습니다 더 이상 본을 사용할 수 없습니다, 그래서 document.getElementById를 추가 그럴거야. 하나는 innerHTML을 사용하여 동일한 일을 수행 할 수 있습니다, 그래서이 될 setRegions을 변경 :

function setRegions(elem) { 
    for (region in countries) 
     elem.innerHTML +='<option value="'+region+'">'+region+'</option>'; 
} 

나는 또한 SELECT에서 빈 OPTION 요소를 삭제. 이러한 변경으로 인해 코드 작업이 필요하지만 조정이 필요한 사항이 더 많을 수 있습니다.

질문에 답하고 조언을 제공하지는 않겠지 만 파이어 폭스와 파이어 버그 디버거 또는 크롬과 유사한 도구를 사용하지 않는다면 너무 열심히 노력하고 있습니다.

편집 2014년 7월 21일 추가하려면 다음 코드를 :

<script type="text/javascript"> 
    setRegions(document.getElementById("region1")); 
</script> 

는 시작과 "REGION1"의 ID와 SELECT에 대한 종료 태그 사이에, 그리고 그 DOM 요소 내기를 할 것이다 전화 할 때 존재하지 않을 것입니다. 그러나 JavaScript를 문서의 머리 부분으로 옮기면이 지역에서 적어도 Firefox에서 작업을 선택합니다. 왜 그런지 모르겠다. 필자는 필자의 예에서했던 것처럼 끝까지 움직이거나, onload에 연결해 주길 강력히 권유한다.DOM은 조작하기 전에 실제로 설정해야합니다.

그러나 Firebug 디버거를 사용하여 제안한 변경 사항으로 코드를 실행하면 TypeError: oCountrySel.options is undefined이 표시됩니다.

방화 광의 복사본을 구하거나 Firefox에 설치하거나 Chrome의 개발자 도구를 사용하고, 자신의 서버 환경에서 코드를 실행하고, 콘솔 탭을 살펴보십시오. 그것은 정말로 당신을 도울 것이고, 그것은 정말로 어렵지 않습니다.