Question

我有两个javascripts

<script type="text/javascript">
    $("#cexpiryyear li").on('click',function () {
        var selectedOption1 = $(this).attr('data-value');
        $("#expiry_year").val(selectedOption1);
        alert( $("#2ndexpiry_year").val());
    });
</script>

<script type="text/javascript">
    $("#cexpirymonth li").on('click',function () {
        var selectedOption = $(this).attr('data-value');
        $("#expiry_month").val(selectedOption);
        alert( $("#expiry_month").val());
    });
</script>

它们位于</body>之前。但只有最后一个工作的脚本和第一个工作不会工作。任何解决方案。为什么会这样？

html如下所示

 <div class="clearfix">                
                <div class="inline pull-left m-r">


                  <div id="mySelect" class="select btn-group m-b" data-resize="auto">
                    <button style="font-weight:700;background-color:#fff;border-style:solid;
border-width:2px" type="button" id="expirymonth" name="expirymonth" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                      <span class="dropdown-label"></span> <span class="caret"></span>
                    </button>
              <input type="hidden" id="expiry_month" name="expiry_month"/>
                    <ul id="cexpirymonth" class="dropdown-menu">
                      <li data-value="00" data-selected="true" ><a href="#">Select Month</a></li>
                      <li data-value="01"  class="selectOption"  ><a href="#">01</a></li>
                      <li data-value="02" ><a href="#">02</a></li>
             <li data-value="03" ><a href="#">03</a></li>
                      <li data-value="04" ><a href="#">04</a></li>
             <li data-value="05" ><a  href="#">05</a></li>
                      <li data-value="06" ><a  href="#">06</a></li>
             <li data-value="07" ><a  href="#">07</a></li>
                      <li data-value="08" ><a  href="#">08</a></li>
             <li data-value="09" ><a  href="#">09</a></li>
                      <li data-value="10" ><a  href="#">10</a></li>
             <li data-value="11" ><a href="#">11</a></li>
                      <li data-value="12" ><a href="#">12</a></li>


                    </ul>
                  </div>
</div>
<div class="inline pull-left m-r">

                  <div id="mySelect" class="select btn-group m-b" data-resize="auto">
                    <button style="background-color:#fff;font-weight:700;border-style:solid;
border-width:2px;" type="button" id="expiryyear" name="expiryyear" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                      <span class="dropdown-label"></span> <span class="caret"></span>
                    </button>
            <input type="hidden" id="expiry_year" name="expiry_year"/>
                    <ul id="cexpiryyear" class="dropdown-menu">
<li data-value="2011" data-selected="true"><a href="#">Select Year</a></li>
<li data-value="2012"><a href="#">2012</a></li>
<li data-value="2013"><a href="#">2013</a></li>
<li data-value="2014"><a href="#">2014</a></li>
<li data-value="2015"><a href="#">2015</a></li>
<li data-value="2016"><a href="#">2016</a></li>
<li data-value="2017"><a href="#">2017</a></li>
<li data-value="2018"><a href="#">2018</a></li>
<li data-value="2019"><a href="#">2019</a></li>
<li data-value="2020"><a href="#">2020</a></li>
<li data-value="2021"><a href="#">2021</a></li>
<li data-value="2022"><a href="#">2022</a></li>
<li data-value="2023"><a href="#">2023</a></li>
<li data-value="2024"><a href="#">2024</a></li>
<li data-value="2025"><a href="#">2025</a></li>
<li data-value="2026"><a href="#">2026</a></li>
<li data-value="2027"><a href="#">2027</a></li>
<li data-value="2028"><a href="#">2028</a></li>
<li data-value="2029"><a href="#">2029</a></li>
<li data-value="2030"><a href="#">2030</a></li>
<li data-value="2031"><a href="#">2031</a></li>
<li data-value="2032"><a href="#">2032</a></li>
<li data-value="2033"><a href="#">2033</a></li>
<li data-value="2034"><a href="#">2034</a></li>
<li data-value="2035"><a href="#">2035</a></li>
<li data-value="2036"><a href="#">2036</a></li>

                    </ul>
                  </div>

</div>
</div>
  </div>

只有最后一个javascript有效，而不是上面的那个。我尝试在一个标签中设置它们，但是没有工作

Answer 1

id不能以数字开头 - 脚本实际上正在运行，但2ndexpiry_year是无效的ID。

Answer 2

除了没有理由将所有内容放在多个标签中之外，您应该只在加载页面时绑定事件。

因此：

$(document).ready(function() {
    $("#cexpiryyear li").on('click',function () {
         var selectedOption1 = $(this).attr('data-value');
        $("#2ndexpiry_year").val(selectedOption1);
        alert( $("#2ndexpiry_year").val());
    });
}

为什么身体中只有一个javascript有效？

2 个答案: