jquery - mise à jour de href en fonction de la valeur sélectionnée?

Question

J'essaie d'assembler un tag href basé sur les valeurs que l'utilisateur sélectionne dans un menu de sélection. C'est le code que j'ai, qui ne fonctionne pas. Je suis assez nouveau pour jQuery, donc, si quelqu'un peut me aider ou suggérer une meilleure façon, ce serait génial ...

$(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); 
} 

Et, le code html correspondant:

<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> 

Answer 1

Effectuez les opérations suivantes

$(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); 
} 

Answer 2

$('#addtocalendar-selects').length renvoie 0.

Par conséquent, les événements ne sont pas attachés.

Supprimez cette vérification, ou change it à $("select.addCalselect").length et vous voilà prêt.