Как добавить всплывающую подсказку в выпадающий список? - PullRequest
0 голосов
/ 20 января 2010

Я должен реализовать функцию всплывающей подсказки для выпадающего меню.Также во всплывающей подсказке не будет статического текста, это должно быть выбранное значение раскрывающегося списка.Как я могу сделать это в JQuery?

Ответы [ 5 ]

1 голос
/ 30 января 2013

JAVASCRIPT AND JQUERY.

Вы указали всплывающую подсказку только для выбранного значения для всех выпадающих страниц на странице сразу.

<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
    for(i=0;i<drpdwnlst.length;i++){
        drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
    }
}
</script>

В приведенном ниже коде я добавляювсплывающая подсказка для всех значений в раскрывающемся списке, а также для выбранного значения.Это также в java-скрипте и тоже для всех выпадающих страниц на странице.

<script language="javascript">
function dropDwnToolTips() {
  var drpdwnlst = document.getElementsByTagName("Select");
  for(i=0;i<drpdwnlst.length;i++){
      for(j=0;j<drpdwnlst[i].length;j++){
          drpdwnlst[i][j].title = drpdwnlst[i].options[j].text;
      }
      drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
  }
}
</script>

для любой функции, выполните приведенные ниже действия, чтобы вызвать ее.

<body onload="dropDwnToolTips()">
...
</body>

или,

<script language="javascript">
window.onload=function() {
    ... script code goes here...
}

или, если вы используете dojo,

<script language="javascript">
dojo.ready(function() {
    ... script code goes here...
});

или

jQuery делает весь сценарий еще проще ..

$(document).ready(function() { 
    $("select").each(function() { 
        var s = this; 
        for (i = 0; i < s.length; i++) 
            s.options[i].title = s.options[i].text; 
        if (s.selectedIndex > -1) 
            s.onmousemove = function() { s.title = s.options[s.selectedIndex].text; }; 
    }); 
});

Я бы посоветовал вам использовать функцию события onChange раскрывающегося списка вместо события готовности документа.

0 голосов
/ 17 февраля 2010
0 голосов
/ 20 января 2010

Как то так?

selectElement.addEventListener('change', function (e) {
  selectElement.title = selectElement.value;
});
0 голосов
/ 20 января 2010

Я получил душу:

На всякий случай, если вы хотите знать, как я это сделал: -

jQuery('#myDropDownID').hover(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12; 
                jQuery("body").append("<div id='myTooltip' class='portal-tool-tip' style='position: absolute; z-index: 100; display: none;'>" + jQuery("OPTION:selected", this).text()  + "</div>");
                if(jQuery.browser.msie) var tipWidth = jQuery("#myTooltip").outerWidth(true)
                else var tipWidth = jQuery("#myTooltip").width()
                jQuery("#myTooltip").width(tipWidth);
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            }, function(){
                jQuery("#myTooltip").remove();              
            }).mousemove(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                var tipWidth = jQuery("#myTooltip").outerWidth(true);
                var tipHeight = jQuery("#myTooltip").outerHeight(true);
                if(tipX + tipWidth > jQuery(window).scrollLeft() + jQuery(window).width()) tipX = e.pageX - tipWidth;
                if(jQuery(window).height()+jQuery(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            });

Смотрите здесь: http://jsbin.com/owoka

0 голосов
/ 20 января 2010

Вы можете реализовать раскрывающийся список в JavaScript как div. Как только вы это сделаете, вы можете добавить всплывающие подсказки, используя что-то вроде: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

...