0
최근 일부 프로젝트를 진행하고 있습니다. HTML로 작성된 단일 페이지이며 여러 개의 JS 요소를 포함합니다.여러 종속 목록을 하나의 HTML 페이지에 추가하십시오.
페이지에서 여러 목록을 사용합니다. 문제는 내가 주 목록에서 값을 선택한 후 두 번째 목록이 관련 항목을 표시한다는 것을 의미하는 종속 목록이 있다는 것입니다. 모두 원활하게 작동하지만 같은 페이지에서 동일한 종속 목록을 추가해야합니다. 목록은 절대적으로 동일합니다. 단지이 페이지의 다른 섹션에 있습니다.
티 문제는 첫 번째 종속 목록에서 무언가를 선택하면 다른 섹션에있는 두 번째 종속 목록에 영향을 미칩니다. 그리고 두 번째 종속 목록에서 가치를 선택하면 아무 일도 일어나지 않습니다.
두 번째 목록의 이름은 바뀌었지만 결과는 표시되지 않았습니다.
페이지의 첫 번째 목록 샘플 코드, 종속 목록의 JS 코드를 여기 게시하고 있습니다.
이 문제와 관련하여 도움을 주시겠습니까? 아이디어는 단일 HTML 페이지의 다른 섹션에 같은 목록을 표시하는 것이지만 두 목록 모두 독립적으로 작동해야합니다. 본문 섹션에서
코드 HTML 페이지 :
<select id="list" name="optone" size="1"
onchange="setOptions(document.dependant_list.optone.options
[document.dependant_list.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="01 00 - Option 1">01 00 - Option 1</option>
<option value="01 00 - Option 2">01 00 - Option 2</option>
<option value="01 00 - Option 3">01 00 - Option 3</option>
<option value="01 00 - Option 4">01 00 - Option 4</option>
<option value="01 00 - Option 5">01 00 - Option 5</option>
</select>
<select id="list" name="opttwo" size="1">
<option value=" " selected="selected">Please, choose from main list first</option>
</select>
JS 코드, 외부 소스에있는 내 경우 : 추가 세부 사항이 필요한 경우
function setOptions(chosen) {
var selbox = document.dependant_list.opttwo;
selbox.options.length = 0;
if (chosen == "01 00 - Option 1") {
selbox.options[selbox.options.length] = new
Option('Dependent value 1');
selbox.options[selbox.options.length] = new
Option('Dependent value 2');
selbox.options[selbox.options.length] = new
Option('Dependent value 3');
}
if (chosen == "02 00 - Option 2") {
selbox.options[selbox.options.length] = new
Option('Dependent value 4');
}
if (chosen == "03 00 - Option 3") {
selbox.options[selbox.options.length] = new
Option('Dependent value 5');
}
if (chosen == "04 00 - Option 4") {
selbox.options[selbox.options.length] = new
Option('Dependent value 6');
}
if (chosen == "05 00 - Option 5") {
selbox.options[selbox.options.length] = new
Option('Dependent value 7');
}
}
가 빠른 시간 내에 연락 드릴 것입니다.
업데이트 :
<DIV ID="services"
<select class="list" name="optone" size="1"
onchange="setOptions(document.dependant_list.optone.options
[document.dependant_list.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="01 00 - Option 1">01 00 - Option 1</option>
<option value="01 00 - Option 2">01 00 - Option 2</option>
<option value="01 00 - Option 3">01 00 - Option 3</option>
<option value="01 00 - Option 4">01 00 - Option 4</option>
<option value="01 00 - Option 5">01 00 - Option 5</option>
</select>
<select class="list" name="opttwo" size="1">
<option value=" " selected="selected">Please, choose from main list first</option>
</select>
</div>
<div id="fraud">
<select class="list" name="optone" size="1"
onchange="setOptions(document.dependant_list.optone.options
[document.dependant_list.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="01 00 - Option 1">01 00 - Option 1</option>
<option value="01 00 - Option 2">01 00 - Option 2</option>
<option value="01 00 - Option 3">01 00 - Option 3</option>
<option value="01 00 - Option 4">01 00 - Option 4</option>
<option value="01 00 - Option 5">01 00 - Option 5</option>
<select class="list" name="opttwo" size="1">
<option value=" " selected="selected">Please, choose from main list first</option>
</select>
</select>
</div>
당신은 목록 그러나 그들은 서로 :(
와 CLASS에, 그들은 여전히 엉망 ID를 변경 한 후, 동일, 다른 된 DIV에 볼 수 있듯이
'id = "list"'가 두 번 있습니다. ID는 한 번만 사용할 수 있습니다. –
참고로, 그 모든 것들 대신에'setOptions (this.value)'를 간단하게 사용할 수 있습니다. –
페이지에 목록이 많으며 다른 목록의 옵션이 변경되는 목록이 있습니다. 목록 1과 같은 것은 목록 2의 옵션을 변경합니다. 그리고 목록 3은 목록 4의 옵션을 변경합니다. 맞습니까? 목록의 관계에 대해서는 분명하지 않습니다. – flowstoneknight