我有以下代码。当用户点击"添加另一项运动"时,kpsport1将根据用户点击的次数增加到2,3,4等。
此外,当他们选择一项运动时,我希望"选择你的运动"(formSectionHeader)被他们选择的运动所取代。尽管在JS部分工作了几天,但仍然存在重大问题。感谢您的建议!非常感谢!!
<div id="copy">
<div id="personalInfo">
<h1>Sporting Experience</h1>
<form action="" name="signUp-pg1" id="signUp-pg1">
<div class="singleSportWrap">
<h2 class="formSectionHeader"><strong>CHOOSE YOUR SPORT</strong> <span>you can add another sport later.</span></h2>
<div class="singleSport">
<div id="KPspecialityPosition" class="formSection">
<div id="sportSelectField" class="selectStyled">
<select class="longField styled KPsportSelecter" name="KPsport1" id="KPsport1">
<option value="default">Sport</option>
<option value="basketball">Basketball</option>
<option value="soccer">Soccer</option>
<option value="football">Football</option>
<option value="baseball">Baseball</option>
<option value="hockey">Hockey</option>
</select>
<div class="checkboxInput"><input type="checkbox" name="primarySport" value="primarySport"><span>This my primary sport</span></div>
</div><!-- //selectStyled -->
</div><!-- //formSection -->
</div><!-- //singleSport -->
</div><!-- //singleSportWrap -->
<p id="addAnotherSport" class="addMoreBtn">Add Another Sport</p>
<div id="formStepControls">
<a id="saveForm">Save for Later</a>
<a href="sign-up-3.php" id="proceedForm">Proceed to Vouching</a>
</div><!-- //formStepControls -->
</form>
</div><!-- personal info -->
</div><!-- copy -->
这里有一些JavaScript应该做你所要求的(或者至少我如何解释你所要求的):
document.getElementById("addAnotherSport").onclick = function () {
var kps = document.getElementById("KPsport1");
var i = kps.selectedIndex;
i++;
if (i >= kps.options.length) i = kps.options.length - 1;
kps.selectedIndex = i;
document.getElementsByTagName("strong")[0].innerHTML = kps.options[kps.selectedIndex].text;
}
document.getElementById("KPsport1").onchange = function () {
document.getElementsByTagName("strong")[0].innerHTML = this.options[this.selectedIndex].text;
}
如果你把这个添加到页面底部的脚本标签,就在结束正文标签之前,它应该工作。