Asp.Net DropDownList tooltip or title with JS

Navigation
0

I'm starting in Javascript, and would like my DropDownList of a .ascx control, when selecting an item, display its full value when hovering the mouse, like a tooltip or title.    This is my DropDown: 

<asp:DropDownList CssClass="dropdown" ID="ddlDescricao 
 OnSelectedIndexChanged="ddlDescricao_SelectedIndexChanged"
                        runat="server" TabIndex="0">

I tried to do this: 

    <script type="text/javascript">
    function addToolTip() {
        var ddl = document.getElementById('<%= ddlDescricao.ClientID %>');
        for (var i = 0; i < ddl.options.length; i++) {
            ddl.options[i].title = ddl.options[i].text;
        }
    }
</script>

But it is not working.

I'm using jQuery 1.7

Thanks in advance.

- Edit 11/02/2016 08:27

I'm invoking the function by the dropdown's onmouseover.

    
asked by anonymous 05.02.2016 / 15:16

2 answers

0

Just use the following statement: 

$("select[name*='ddlDescricao']")
    .prop('title', $("select[name*='ddlDescricao'] option:selected").text());

The selector was made using the contains attribute because the name of the controls is usually modified in rendering.

Update: Adding the second objection code 

var $dropdown = $("select[name*='ddlDescricao']");
$dropdown.prop('title', $dropdown.attr('title') + ': ' + $dropdown.children("option:selected").text());
    
05.02.2016 / 16:48
0

I do not know if I understood the problem very well, but if you need to change the title of an element using javascript it can do this: 

<script>
   function alteraTitulo() {
      var ddl = document.getElementById('ddlTeste');
      var title = ddl.options[ddl.selectedIndex].text;
       ddl.title = title;
    }
 </script>

<select id="ddlTeste" onchange='alteraTitulo()'>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>

This way I select the element in question in var ddl = document.getElementById('ddlTeste'); , get the text of the option selected var title = ddl.options[ddl.selectedIndex].text; and change the title ddl.title = title; .

JSFiddle

Editing

A simple solution (using javascript only) for several selects would be to pass the element id to your function. It would look something like this: 

<script>
   function alteraTitulo(id) {
      var ddl = document.getElementById(id);
      var title = ddl.options[ddl.selectedIndex].text;
       ddl.title = title;
    }
 </script>

<select id="ddlTeste" onchange='alteraTitulo("ddlTeste")'>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>

<select id="ddlTeste1" onchange='alteraTitulo("ddlTeste1")'>
<option>Teste 1</option>
<option>Teste 2</option>
<option>Teste 3</option>
</select>

JSFiddle

By using jQuery you can perform the change by running the .change () event, thus replacing the title. Your code would look like this: 

$('select').change(function(){
var ddl = $(this);
var title = ddl.find("option:selected").text();
ddl.prop('title', title); 
console.log(title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><select><option>Valor1</option><option>Valor2</option><option>Valor3</option></select><select><option>Teste1</option><option>Teste2</option><option>Teste3</option></select>

JsFiddle

    
11.02.2016 / 12:15
NodeJS: page not found Java charset - How to correctly read from System.in?