编辑框点击获取下拉框

最新推荐文章于 2021-01-14 14:13:05 发布
原创 最新推荐文章于 2021-01-14 14:13:05 发布 · 624 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。


html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<style type="text/css">
#divlight
{float:left;width:100px
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>所属区域</td>
        <td>
  <input type="text" id="txtRegion" /><!---background-color: #ccffff;----->
            <div id="divList" style="display: none; border: 1px solid #0000aa; overflow: hidden; height: 200px; position: absolute; ">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                 <tr ><!--background-color:lightgreen;----background-color:lightgreen;----->
                     <td align="left" id="tdtitle" style="cursor: hand;border-bottom:#cccccc solid 1px;" >线路选择</td>
                        <td align="right" id="tdClose" style="cursor: hand;border-bottom:#cccccc solid 1px;" >X&nbsp</td>
                    </tr>
                    <tr>
                        <td>
                            <div style="overflow: auto; width: 100%; height: 132px; background-color: ##ffffcc;">
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="总路开关" checked>总路开关
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="招牌灯">招牌灯
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="展示厅">展示厅
                                </div>
                                <br>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="电视" checked>电视
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="办公照明2">办公照明2
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="办公照明">办公照明
                                </div>
                                <br>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="电视" checked>走道
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="射灯">射灯
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="备用2">备用2
                                </div>
                                <br>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="墙面射灯" checked>墙面射灯
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="冰箱">冰箱
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="备用8">备用8
                                </div>
                                <br>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="空调" checked>空调
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="备用3">备用3
                                </div>
                                <div style="float:left;width:100px">
                                <input type="radio" name="linelight" value="备用11">备用11
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
 </table>
<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion");   //需要弹出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要弹出的下拉列表
var oClose = document.getElementById("tdClose");　　　//关闭div的单元格，也可使用按钮实现
var colOptions = document.getElementsByTagName("input"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
    oDivList.style.display = "none";　　//隐藏div，实现关闭下拉框的效果
};
//设置下列选择项的一些事件
for (var i=0; i<colOptions.length; i++)
{
 if(colOptions[i].name == "linelight")
 {
     colOptions[i].style.cursor = "hand";
     colOptions[i].onclick = function()　　　//为列表项添加单击事件
     {
         oRegion.value = this.value;     //显示选择的文本；
     };
 }
}
//文本获得焦点时的事件
oRegion.onfocus = function()
{
    oDivList.style.display = "block";
    if (bNoAdjusted)　　//控制div是否已经显示的变量
    {
        bNoAdjusted = false;
        //设置下拉列表的宽度和位置
        oDivList.style.width = 350;//this.offsetWidth+150;
        oDivList.style.posTop = oDivList.offsetTop;// + this.offsetHeight;
        oDivList.style.posLeft = oDivList.offsetLeft;// - this.offsetWidth - 8 + 200;
    }
};
</script>
</body>
</html>
WPF篇（18）-DataGrid数据表格控件+ComboBox下拉框控件
一个人的江湖
08-14 2766
第二个则绑定了一个数据源，并在Xaml中指定了DisplayMemberPath属性显示Person的Name，最后在后端代码中，依然使用SelectedItem 属性获取当前选中项，转化成Person，以获取实际的选中数据。ComboBox表示带有下拉列表的控件，实际上可以把它看成两个部分组成，一个类似TextBox文本输入框，所以它有一个Text文本属性，用于获取ComboBox框的文本值，另一个是类似ListBox的列表框，用于显示ComboBox绑定的所有数据源。这样的话，当鼠标双击时会报错。
EasyUi datagrid editor 自定义编辑器 mutilbox 一列多编辑器 一列包含 下拉框 文本输入框
tttesbit的博客
05-20 3249
easyUI datagird数据表格 一列实现下拉框 和 编辑框 复合编辑器 自定义编辑器
在Easyui-datagrid嵌入下拉框（combobox）
热门推荐
coolboyzero的博客
08-30 2万+
Easyui中datagrid中嵌入combobox并赋值传值显示组合框方法总结
在DataGridView控件中加入ComboBox下拉列表框的实现
zoohouse的专栏
08-23 1026
<br />      虽然在Visual Studio中 DataGridView控件的DataGridViewComboBoxColumn可以实现下拉列表框，但这样的列会在整列中都显示下拉列表框，不太美观，而且还要用代码实现数据绑定。本文介绍一种只在当前编辑单元格中显示下拉列表框的方法，供大家参考。 <br />　　首先新建一个Windows应用程序，将主窗体重命名为MainForm，在MainForm中加入一个DataGridView控件，命名为dgv_User。如下图所示：<br /> <br />
在DataGrid中使用下拉列表框和设置焦点[翻译]
05-31 1万+
在DataGrid中简单使用下拉列表框   作者：Tushar Ameta翻译：郑佐      在DataGrid中使用下拉列表问题。这篇文章讲了如何在 System.Windows.Forms.DataGrid中切入使用ComboBox控件。不过原文不全，无法调试，在这里为了说清楚点，对原文作了一些修改，整篇文章主要包括三方面的内容。 1．   在DataGrid中加入Combo
扩展的CListCtrl_编辑框_下拉框_CListCtrl_MFC_
09-29
当我们需要在CListCtrl的单元格中增加更丰富的交互功能，比如编辑框或下拉框时，我们可以扩展其功能，以实现更加复杂的用户界面。 首先，我们需要理解CListCtrl的基本操作。它提供了InsertColumn、InsertItem等方法...
QTableView添加复选框，下拉框控件
03-03
在特定的开发场景中，我们可能需要增强QTableView的功能，例如为表格中的每一行添加复选框或者下拉框控件，以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate（委托）机制以及信号与槽的连接。 首先，我们...
vue+Element中table表格实现可编辑（select下拉框）
10-15
3. **数据动态绑定**: 通过点击下拉框获取焦点时触发的方法`@focus`，可以动态获取当前行的id，并根据此id来查询对应的数据，然后将结果赋值给数组，以供下拉框使用。 4. **动态获取下拉数据**: 每行下拉框中的选项...
SSM框架如何实现下拉框功能
weixin_44544716的博客
05-27 2060
开发工具与关键技术：Java、myEclipse 作者：吴晓佩 撰写时间：2020年05月27日 下拉框在做项目中是非常常用的一个控件，运用下拉框可以限制在已有的数据准确的选择数据，单选框也可以实现这一功能，但相对于数据较多就应该选择下拉框，单选框比较占空间位置，如下是SSM项目实现下拉框功能的方法步骤。 1、下拉框控件属性select。 2、添加封装好的combox.js; 可根据自己的需求自行封装。 如下是我使用的js代码： //点击table的行选择复选框 function Check(select
js实现带复选框的多选下拉框
daxi玫瑰的博客
11-19 4156
最近被派去做一个不使用任何框架的纯js的项目，界面属于那种机器的界面，算是中规中矩的。新特性需要用原生的js或者jq写一个可多选的下拉框，实现的方式有很多。网上常见的有一下几种： 1.下载multiple-select.js插件，由于公司使用网络的限制，下载插件不方便，而且这个最后的效果也不是我想要的，所以没有采用这种实现方法。 2.网上还有常见的 div+ul&li 的实现，这种也比较方便，不过在处理值的时候，感觉不like~，最后也没有选择这种方法。 3.使用div+定位：（根据上面方法2
Easyui datagrid 可编辑行里下拉框combobox选择时改变同列数据
qq_36873710的博客
01-14 3602
最近做easyui 表格里，遇到一个坑 先说需求，客户希望做一个表格可编辑，满足单条输入修改、批量删除保存，在可编辑表格里有一个三级联动的下拉框combobox，参考网上的一些思路，踩了几个坑之后，解决了该问题。 上代码： //设置表格需要编辑的列 { field: 'companyId', title: '客户编码', width: 140, editor : { type : 'combobox', options : { url
datagrid中添加下拉框combobox
zhang_kang_user的博客
11-01 8181
js：function initDataEditDg() { var _KKXMItems = [{ "FYLXID": 0, "FYLXMC": "现金" }, { "FYLXID": 1, "FYLXMC": "货扣" }] $("#dataEditDg").datagrid({ title:
miniUI datagrid打开行内编辑时，下拉框控件显示的是id而不是text解决
May_mm的博客
05-20 3651
1.前言 在使用datagird，有时候会遇到需要使用行内编辑的情况，但是呢，有时候会遇到各种奇奇怪怪的问题，下面介绍主要介绍两个问题的解决办法： ①打开行内编辑时，下拉框（下拉树）控件显示的是id而不是text解决方式； ②行内编辑打开时，修改了内容，取消行内编辑后，修改的值没有显示在对应的列上，但点击保存后，对应列又显示的是修改后的值； 2.前端代...
在DataGrid中使用下拉列表ComboBox控件
我本无名的专栏
03-24 3292
在使用Microsoft.Net Framework环境下编写数据库方面的软件时，经常要用到DataGrid数据显示控件，但同时也发现，DataGrid提供的网格显示中，只有两种：一种是普通的Text控件，另一种则是CheckBox控件，显示形式极少。但我们经常需要实现下拉列表控件的显示形式。由于DataGrid中列的显示样式是由DataGridTextBoxColumn和DataGridBo
Qt实现输入框,组合框提示,模糊查询,搜索关键字下拉提示功能
山水人间。
03-18 1万+
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { QWidget *NewWin = new QWidget; NewWin->resize(QSize(200,100)); //使输入框具有初始化提示语句 QLineEdit *MyEdit = new
document对象+获取节点三种方法演示：
xdd_lmd的博客
07-30 6558
document对象的演示。 该对象将标记型文档进行封装。 该对象的作用，是可以对标记型文档进行操作。 最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。 要想获取节点，必须要先获取到节点所属的文档对象document。 所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现： 1，getElementById:通过标签的id属性值获取
duilib：做一个可编辑的Combo
Ryan-专栏
02-13 2766
做一个可编辑的Combo 根据自己的需求可有两种方法 1.像duilib的GameDemo里的登录窗口 看xml其实是一个edit窗口，覆盖在Combo上面 完整的自行去看demo. 缺点：如果想要通过输入字符打开Combo下拉框，目前需要修改很大一部分源码，这个功能涉及到输入查找。 2.就是写个通用窗口，里面就一个list. 具体做法就是：在创建这个窗口的...
html 点击控件显示下拉框
积水成渊
11-13 1万+
http://www.w3.org/1999/xhtml" >      标题页                                                                                                                                           
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值