하나의 div를 표시하지만 특정 옵션을 선택하면 다른 div를 숨기는 if / else 문을 만들려고합니다. 예를 들어 아래를 참조하십시오. 나는 첫 번째 if 문에서 시도했지만 운이 없었으며 첫 번째 if 대괄호에 여러 작업을 추가하는 방법을 찾지 못하는 것 같습니다. 도움을 주시면 감사하겠습니다.
내 JS는 다음과 같습니다.
function showSmallJobsite(small){
if(small.value == 3){
document.getElementById('smalljobsite').style.display = "block",;
document.getElementById('mediumjobsite','largejobsite').style.display = "none";
}
else if(small.value == 7){
document.getElementById('mediumjobsite').style.display = "block";
}
else if(small.value == 8){
document.getElementById('largejobsite').style.display = "block";
}
else (small.value == 0){
document.getElementById('largejobsite').style.display = "block";
}
}
내 HTML은 다음과 같습니다.
<label>Number of users on site:</label>
<select id="numberofstaff" onchange="showSmallJobsite(this)">
<option value="0">--Select--</option>
<option id="staffnumberthree" value="3">1-3</option>
<option id="staffnumberseven" value="7">4-7</option>
<option id="staffnumbereight" value="8">8+</option>
</select>
<div id="smalljobsite" style="display:none;">
<div class="fieldcontainer">
<label>Plan Table?:</label>
<select name="plan_table" required>
<option>--Select--</option>
<option>Yes</option>
<option>No</option>
<select>
</div>
<br>
<div class="fieldcontainer">
<label>E-mail:</label>
<select name="dslcablesmall" required>
<option>--Select--</option>
<option>DSL/Cable</option>
<option>LTE Only</option>
</select>
</div>
</div>
<div id="mediumjobsite" style="display:none;">
<br>
<div class="fieldcontainer">
<label>Trailers?:</label>
<input type="number" name="phone_number" maxlength="10" required>
</div>
<br>
<div class="fieldcontainer">
<label>Plan Tables?:</label>
<input type="email" name="email" maxlength="100" required>
</div>
<br>
<div class="fieldcontainer">
<label>Phone System?:</label>
<input type="text" name="project_name" maxlength="70" required>
</div>
<br>
<div class="fieldcontainer">
<label>External Wifi?:</label>
<input type="text" name="project_number" required>
</div>
</div>
<div id="largejobsite" style="display:none;">
<br><br>
<div class="fieldcontainer">
<label>Over 25 Users?:</label><input type="number" name="phone_number" maxlength="10" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Trailers or similar sized offices?:</label>
<input type="email" name="email" maxlength="100" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Plan Tables?:</label>
<input type="text" name="project_name" maxlength="70" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Second Copier?:</label>
<input type="text" name="project_number" required>
</div>
</div>
내가 제안하고 싶은 또 다른 접근 방식은 classname을 포함하는 div에 적용한 다음 하위 양식을 토글하는 것입니다. 예를 들어, selectJS를 트리거 한 것이 있다고 가정합니다.
<select onchange="showJobSite(this)">
<option value="">Select</option>
<option value="0">A large job site</option>
<option value="8">Another large job site</option>
<option value="3">A small job site</option>
<option value="7">A medium job site</option>
</select>
이제 if문 대신 값을 가져 와서 클래스 이름으로 적용합니다. 숫자는 유효한 클래스 이름이 아니므 j로 "job"에 대한 문자에 숫자를 추가하겠습니다 .
function showJobSite(obj){
var el = document.getElementById('container');
el.setAttribute('class', 'container j' + obj.value);
};
마지막으로 모든 것을 숨기고 j + n클래스 이름 에 따라 자식 폼을 표시하도록 CSS를 설정할 수 있습니다 . 처럼:
.container > div {
display: none;
}
.container.j3 #smalljobsite,
.container.j7 #mediumjobsite,
.container.j0 #largejobsite,
.container.j8 #largejobsite{
display: block;
}
데모 용 바이올린 : http://jsfiddle.net/5knL7zf8/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다