如何根据下拉选项更改跨度的内容

我有以下代码。当用户点击“添加另一项运动”时，我试图获得它，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 -->

来源

2013-03-15 lobstahcrushah

这与PHP或HTML5有什么关系？另外，你试过的JavaScript在哪里？ – j08691 2013-03-15 19:14:11

下面是一些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; 
}

如果在此添加到脚本标签页面的底部恰好在关闭的body标签之前应该起作用。

来源

2013-03-15 19:23:06 David

谢谢！将尝试这个并回馈给你！ – lobstahcrushah 2013-03-15 19:27:32

如何根据下拉选项更改跨度的内容

回答

相关问题