jquery - 根据选择值更新href?

时间:2010-10-30 01:58:18

标签: jquery select attributes href

我正在尝试根据用户从选择菜单中选择的值来组合href标记。这是我的代码,但是没有用。我对jQuery很新,所以,如果有人可以帮助我或建议更好的方法,那就太棒了......

$(document).ready(function()
{
  if($('#addtocalendar-selects').length) {
    $("select.addCalselect").change(displayVals);
    displayVals();
  }
});

function displayVals() {
      var monthValues = $("#monthVal").val();
      var dayValues = $("#dayVal").val();
      var yearValues = $("#yearVal").val();
      $("a.desturl").attr('href', '/' + yearValues + '-' + dayValues + '-' + monthValues);
}

并且,相关的html:

<select id="monthVal" class="form-select addCalselect">
    <option value="01">Jan</option>
    <option value="02">Feb</option>
    <option value="03">Mar</option>
    <option value="04">Apr</option>
    <option value="05">May</option>
    <option value="06">Jun</option>
    <option value="07">Jul</option>
    <option value="08">Aug</option>
    <option value="09">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
</select>

<select id="dayVal" class="form-select addCalselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>

<select id="yearVal" class="form-select addCalselect">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
</select>

<a class="desturl" href="">C8Dest</a>

2 个答案:

答案 0 :(得分:1)

尝试以下

$(document).ready(function() {
    $('select.addCalselect').change(displayVals);
});

function displayVals() {
    var monthValues = $("#monthVal").val();
    var dayValues = $("#dayVal").val();
    var yearValues = $("#yearVal").val();
    $("a.desturl").attr('href', '/' + yearValues + '-' + dayValues + '-' + monthValues);
}

答案 1 :(得分:0)

$('#addtocalendar-selects').length返回0.

因此,事件未附加。

删除该支票,或change it移至$("select.addCalselect").length,您就可以了。