jQueryのツールチップがどのように私は、次のような何かを達成することができますドロップダウン選択した値

からフルテキストを表示するには？私はあなたが"lstMovies"にoption要素のIDを設定すると仮定すると、たとえばしてくださいjQueryのツールチップがどのように私は、次のような何かを達成することができますドロップダウン選択した値

出典

2012-01-11 learning

そのページにはツールチップの言及がありますが、標準のHTML 'select'コントロールだけが表示されます。 –

@AbbasこれはJQUERY TOOLTIPを使用して達成できるかどうか尋ねています – learning

急いで返信して申し訳ありません、私はjQueryの部分を見なかったので、私はコメントを削除しました。この例の純粋なJavaScriptをjQueryに翻訳した回答を投稿しました。 – Abbas

あなたがhereを提供するツールチッププラグインを使用していると仮定すると、次のコードは、必要なものを行う必要があります。

$(function() { 
    $('#test').tooltip({ 
     bodyHandler: function(){ 
      return $(this).find("option:selected").text(); 
     } 
    }); 
});

もちろん、testはあなたのselectのid属性になるところ。フィドルhereを見てください。

出典

2012-01-11 12:05:24 burnedikt

リンクが壊れています。 – Bharat

を持つことができる、あなたが何をする必要があるかのショーで、mouseoverとmouseoutイベントにツールチップdivを非表示にします。

$("#lstMovies").mouseover(
    function (event) { 
     $("#spnTip").text($(this).val()) 
     $("#spnTip").show(); 
     $("#spnTip").style.left = event.pageX; 
     $("#spnTip").style.top = event.pageY + 20; 
}); 

$("#lstMovies").mouseout(
    function (event) { 
     $("#spnTip").hide(); 
});

HTMLとCSSは、あなたの例ではほぼ同じです。唯一の違いは、ツールチップのdiv（ID：spnTip）のインラインスタイルで、プロパティをプロパティをhiddenに設定するのではなく、noneに設定していることです。

出典

2012-01-11 10:45:13 Abbas

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

またはあなたは、

<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イベントでこの関数を使用することをお勧めします。

出典

2013-01-30 04:10:13 AZD

jQueryのツールチップがどのように私は、次のような何かを達成することができますドロップダウン選択した値

答えて

関連する問題