如何根据下拉选择更改跨度的内容[重复]答案

【问题标题】：How to change content of a span based on a drop down selection [duplicate]如何根据下拉选择更改跨度的内容[重复]
【发布时间】：2013-03-15 19:13:13
【问题描述】：

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

【问题讨论】：

这与 PHP 或 HTML5 有什么关系？另外，您尝试过的 JavaScript 在哪里？

标签： php javascript html

【解决方案1】：

这里有一些 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;
}

如果你将它添加到页面底部的脚本标签中，就在结束正文标签之前，它应该可以工作。

【讨论】：

谢谢！会试试这个并回复你！