我已经让这段代码一次只能用于一个选项。代码似乎只加载脚本的末尾，所以只有最后一个选项可以工作，但其他选项不能。
以下是脚本代码：
<script type="text/javascript">
function test() {
<!-- 2 LESSONS -->
if (document.getElementById('number-of-lessons').value == '2') {
document.getElementById('lesson-2').style.display = 'inline'
document.getElementById('lesson-2-title').style.display = 'block'
} else {
document.getElementById('lesson-2').style.display = 'none'
document.getElementById('lesson-2-title').style.display = 'none'
}
<!-- 3 LESSONS -->
if (document.getElementById('number-of-lessons').value == '3') {
document.getElementById('lesson-2').style.display = 'inline'
document.getElementById('lesson-2-title').style.display = 'block'
document.getElementById('lesson-3').style.display = 'inline'
document.getElementById('lesson-3-title').style.display = 'block'
} else {
document.getElementById('lesson-2').style.display = 'none'
document.getElementById('lesson-2-title').style.display = 'none'
document.getElementById('lesson-3').style.display = 'none'
document.getElementById('lesson-3-title').style.display = 'none'
}
<!-- 4 LESSONS -->
if (document.getElementById('number-of-lessons').value == '4') {
document.getElementById('lesson-2').style.display = 'inline'
document.getElementById('lesson-2-title').style.display = 'block'
document.getElementById('lesson-3').style.display = 'inline'
document.getElementById('lesson-3-title').style.display = 'block'
document.getElementById('lesson-4').style.display = 'inline'
document.getElementById('lesson-4-title').style.display = 'block'
} else {
document.getElementById('lesson-2').style.display = 'none'
document.getElementById('lesson-2-title').style.display = 'none'
document.getElementById('lesson-3').style.display = 'none'
document.getElementById('lesson-3-title').style.display = 'none'
document.getElementById('lesson-4').style.display = 'none'
document.getElementById('lesson-4-title').style.display = 'none'
}
}
</script>
以下是html代码：
<h4>Lesson Form</h4>
<form action="mailer.php" data-validate="parsley" method="post" >
<p><strong>Full Name<span class="red">*</span></strong></p>
<input name="cf_name" data-required="true" class="send" type="text" />
<p><strong>Email Address<span class="red">*</span></strong></p>
<input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
<p><strong>Cellphone No.<span class="red">*</span></strong></p>
<input name="cf_cell" data-required="true" class="send" type="text" />
<p><strong>Instrument Type<span class="red">*</span></strong></p>
<select name="cf_instrument" size="1" class="option" >
<option value="Piano">Piano</option>
<option value="Vocals">Vocals</option>
<option value="Guitar">Guitar</option>
<option value="Bass">Bass</option>
<option value="Flute">Flute</option></select>
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select name="cf_package_type" size="1" class="option">
<option value="Beginner Lesson - R100">Beginner Lesson - R100</option>
<option value="Advanced Lesson - R130">Advanced Lesson - R130</option>
<option value="Professional Lesson - R160">Professional Lesson - R160</option></select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option" onclick='test()'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option></select>
<script src="js/datepair.js"></script>
<p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-2-title" style="display:none"><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p id="lesson-2" class="datepair" style="display: none" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-3-title" style="display:none"><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p id="lesson-3" class="datepair" style="display: none" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-4-title" style="display:none"><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p id="lesson-4" class="datepair" style="display: none" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="using" name="website" type="text" />
<!-- END -->
<input name="Submit" class="submit" value="Book Now" type="submit" /></form>
请帮忙