`
wlhx
  • 浏览: 36799 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

JS给网页上所有的select加title

阅读更多
最近开发的网站由于搜索条件多,所以每项宽度窄而导致有些浏览器看不全下拉框的文字,所以写了个脚本将所有的select加上title这样鼠标放上去就看全了 方法如下:
function BatchSetTitle() {
    var selects = $("select")
    var selectcount = $("select").size();
    for (i = 0; i < selectcount; i++) {
        var select = selects.eq(i);
        var id = $(select).attr("id")
        var option = $("#" + id + " option")
        var count = $("#" + id + " option").size();
        for (j = 0; j < count; j++) {
            var suboption = option.eq(j)
            var text = $(suboption).html()
            $(suboption).attr("title", text);
         }
    }

在body onload时加载此方法即可.
分享到:
评论

相关推荐

    js下用层来实现select的title提示属性.docx

    不同的浏览器对select控件的title属性的支持不同,因此我们需要使用JavaScript来模拟title提示属性的行为。通过使用JavaScript和HTML层,我们可以实现跨浏览器的select控件title提示属性,并提供了一个更加用户友好...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    这个JS插件就是为了解决这个问题,它扩展了`&lt;select&gt;`的功能,允许我们在`&lt;option&gt;`的`title`属性中插入图标地址,然后在界面上动态渲染这些图标。 接下来,我们要探讨如何使用这个插件。在项目中,首先需要引入...

    解决ie6 select的title不能显示的问题

    下面的代码示例展示了如何通过JavaScript动态创建一个覆盖在`select`元素上的`div`容器,并在其中显示带有`title`信息的列表项。这种方法的核心思想是在用户交互时动态地生成这些元素,从而绕过IE6原有的限制。 ```...

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option&lt;/title&gt; &lt;script language="JavaScript"&gt; function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = ...

    LayUi组件TableSelect

    总的来说,LayUI的TableSelect组件是JavaScript开发中的一个强大工具,它简化了在表格中处理选择操作的复杂性,提供了丰富的交互功能。开发者可以根据项目需求灵活定制,实现各种复杂的数据管理场景。

    强大的jquery下拉分页选择插件SelectPage

    &lt;title&gt;使用SelectPage.js&lt;/title&gt; &lt;link rel="stylesheet" href="css/selectpage.css"&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt; &lt;script src="js/selectpage.js"&gt; &lt;!-- 在这里创建下拉...

    js下用层来实现select的title提示属性

    在这种情况下,我们可以利用JavaScript和CSS创建一个自定义的层(layer)来模拟`select`元素的`title`提示效果。 下面是一个详细的过程来实现这个功能: 1. **创建层(div)**:首先,我们需要创建一个新的`&lt;div&gt;`...

    layui问题之模拟select点击事件的实例讲解

    - 找到select元素之后的div.layui-select-title节点的子元素,这个子元素可能是input或者i,然后实现点击事件。 - 点击后下拉框会出现,但下拉框本身还未绑定点击事件。需要找到下拉框中具体要被选中的值的元素...

    select项内容过长解决办法

    在网页设计中,`&lt;select&gt;`元素用于创建一个下拉列表,用户可以从预定义的选项中选择一个。然而,当`&lt;select&gt;`列表中的选项内容过长时,可能会出现一些问题,比如显示不全或者遮挡其他内容。针对这个问题,我们可以...

    ySelect-master.zip

    【ySelect.js插件详解】 在前端开发中,选择器组件是常见的交互元素,用于实现用户多选功能。`ySelect.js`是一个基于jQuery的轻量级...通过理解并熟练运用这些特性,可以轻松地将`ySelect.js`整合进各种网页应用中。

    jquery实现select互斥联动

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...

    mobileSelect.min.js

    app底部弹出选择 var mobileSelect1 = new MobileSelect({ trigger: '#trigger', // 点击容器的ID title: '选择性别', // wheels: [{ data: ['男', '女'] }] });

    select多选下拉列表+模糊查询功能.rar

    &lt;script type="text/javascript" src="jquery.combo.select.js" &gt; &lt;link rel="stylesheet" href="combo.select.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;select name="table_id" id="table_id"&gt; &lt;option value=""&gt;----请选择...

    bootstrap-select下位列表插件

    Bootstrap Select 下拉列表插件是网页设计中一个非常实用的组件,它是在Bootstrap框架基础上进行扩展,以增强原生HTML `&lt;select&gt;` 元素的功能和样式。Bootstrap Select提供了丰富的定制选项,包括多选、搜索过滤、...

    jquery select插件带搜索框的下拉选择框代码

    &lt;title&gt;jQuery Searchable Select示例&lt;/title&gt; &lt;select id="mySelect"&gt; 选项1 选项2 &lt;!-- 添加更多选项 --&gt; &lt;/select&gt; &lt;script src="jquery-1.11.1.min.js"&gt; &lt;script src="jquery.searchableSelect.js...

    jquery模拟select效果实现

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在某些情况下,由于设计或交互需求,我们可能需要对原生的HTML元素进行自定义,例如模拟select下拉菜单的效果。...

    js实现Select下拉框具有输入功能的方法

    本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下: 实现方法一 代码如下:&lt;HTML&gt; &lt;HEAD&gt; &lt;META http-equiv=’Content-Type’ content=’text/html; ...

    editable select

    "Editable Select"是一种交互式UI组件,主要用于网页中的下拉选择列表。它允许用户在下拉框中不仅可以进行预设选项的选择,还可以手动输入自定义值。这种功能在需要提供灵活选择或者用户需要输入特定信息的场景中...

Global site tag (gtag.js) - Google Analytics