jquery - display 3 different bootstrap info icon on change function menu -


i have odd bug trying display tooltip depending on selected in change function (also tooltip info different each). menu has 3 possible choices. seems show/hiding tooltip not work correctly resorted using css opacity property. works 1 , not other. 1 knows why complicated on on change function? , how make work correctly. trying show matching tooltip each option of menu.

$('#menu1').change(function() {                                                          if ($(this).val() == 'newhire') { // or this.value == '1'                                                                                                                            $("#iconnh").css({                                                                  opacity: 1.5                                                              });                                                              $("#iconup").css({                                                                  opacity: 0.0                                                              })                                                             $("#iconnh").show();                                                             $("#iconup").hide();                                                                                                                         }                                                          if ($(this).val() == 'upskill') { // or this.value == '2'                                                              $("#iconnh").show();                                                              $("#iconup").css({                                                                  opacity: 1.5                                                              });                                                               $("#iconup").hide();                                                               $("#iconnh").css({                                                                  opacity: 0.0                                                              });                                                                                                                          }                                                          if ($(this).val() == 'both') { // or this.value == '3'                                                                                                                           $("#box5").show();                                                              $("#iconnh").hide();                                                            } else if ($(this).val() == '') {                                                                                                                           $("#iconnh").hide();                                                               $("#iconup").hide()                                                          }                                                      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <select id="menu1">                                                          <option id="option1" value=""></option>                                                          <option value="newhire">new hire</option>                                                          <option value="upskill">upskill</option>                                                          <option value="both">both</option>                                                      </select>                                                      <a id="iconnh" style="margin-right:200px;" data-toggle="tooltip" title="new hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a>    <a id="iconup" style="margin-right:200px;" data-toggle="tooltip" title="new hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a>


Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -