-
2020-01-14 13:31:25
定义下拉列表:
# 此处省略父容器的定义 ... # 定义下拉列表选项值集合 self.Combo5List = ['0', '1', '2', '3'] # 定义下拉列表Combobox self.Combo5 = Combobox(self.Frame1, values=self.Combo5List, font=('宋体', 9), state='readonly') # 放置控件 self.Combo5.place(relx=0.39, rely=0.636, relwidth=0.063, relheight=0.08) # 设置下拉列表的默认值 self.Combo5.set(self.Combo5List[0])
改变Combobox的选项值:
# 新选项值的集合 index = ["a", "b", "c", "d"] # 给Combobox的选项重新赋值 self.Combo5["value"] = index # 设置默认值 self.Combo5.set(index[2])
获取Combobox选中项的值:
self.Combo5.get()
欢迎访问我的个人博客:机器学习之路
更多相关内容 -
JQuery设置获取下拉菜单某个选项的值(比较全)
2021-01-19 18:02:39JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $(“#ddlRegType”).find(“option:selected”).text(); 获取select选中的 value: $(“#ddlRegType “).val(); 获取select选中的索引: $(“#... -
element-ui中的select下拉列表设置默认值方法
2021-01-19 18:09:34element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表。项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 请选择> label=item.label ... -
VBA 下拉列表代码
2019-02-13 18:42:58Excel VBA 下拉列表代码!! -
怎样使用JQuery动态增加下拉列表选项(option)
2021-06-11 02:20:46本文将介绍怎样使用JQuery动态增加下拉列表选项(option)。项目(选项)文本和值部分将从文本框中动态提取,然后项目(选项)将使用jquery添加到HTML下拉列表中。使用JQuery动态增加下拉列表选项使用JQuery动态增加下拉...本文将介绍怎样使用JQuery动态增加下拉列表选项(option)。
项目(选项)文本和值部分将从文本框中动态提取,然后项目(选项)将使用jquery添加到HTML下拉列表中。
使用JQuery动态增加下拉列表选项
使用JQuery动态增加下拉列表选项
下面的HTML标记由一个HTML下拉列表组成,在使用jquery单击按钮时,项目(选项)将被动态添加到该列表中。
它还包含两个HTML文本框和一个HTML按钮元素。这两个HTML文本框将用于捕获HTML下拉列表的文本和值部分,而HTML按钮将用于向HTML下拉列表添加项(选项/option)。
Text:
Value:
$(function() {
$("#btnAdd").click(function () {
var option = $("");
option.html($("#txtText").val());
option.val($("#txtValue").val());
$("#ddlFruits").append(option);
});
});
解释:
首先,要调用jquery库文件。
其次,程序实现部分,单击“添加(add)”按钮时,将执行jquery click事件处理程序,其中首先引用HTML下拉列表,然后创建HTML选项元素。
文本部分使用html() jquery函数设置,值部分使用html option元素的val() jquery函数设置。
option.html()
option.val()
最后,使用append()jquery函数,HTML选项被添加到下拉列表中。
您可能对以下文章也感兴趣
-
access字段属性设置下拉列表_关于下拉式菜单,这一篇足够了
2020-11-04 14:15:02下拉菜单主要有两种类型:1.用于导航的下拉菜单;2.用于表单的下拉菜单。在本文中,我们将对以下内容进行介绍:1、 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。2、下拉菜单类型和变体虽然标准的...下拉菜单主要有两种类型:
1.用于导航的下拉菜单;
2.用于表单的下拉菜单。
在本文中,我们将对以下内容进行介绍:
1、 结构剖析
下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。
2、下拉菜单类型和变体
虽然标准的下拉菜单被广泛理解,但有一些不同的类型和变体,你可能需要在下一步的工作中考虑。请注意,在这些例子中,我只包括表格中使用的下拉菜单,而不包括导航中使用的下拉菜单。
标准下拉菜单
标准下拉菜单是我们听到 "下拉菜单 "这个词的时候会想到的。在活动状态下,它看起来应该和文本输入字段非常相似,直到你点击它,它就会打开一个菜单。
带自动推荐的下拉菜单
我第一次知道自动推荐是在Google的搜索领域;然而,我不知道它是在哪里开始实施的。(如果你知道,请告诉我。)当你有长长的列表,用户已经知道答案的时候,它就特别有用(例如,你来自哪个国家)。
具有自动完成和自动推荐功能的下拉菜单
自动建议不要与自动完成混淆。自动建议是当输入字段显示供用户选择的选项时。自动完成是指输入提出一种完成单词或短语的方法。
自动填写字段有时会伪装成文字输入,直到你开始打字为止。
带多选的下拉菜单
虽然大多数下拉菜单是单选按钮的延伸(因为你只能选择一个项目),但这个下拉菜单是复选框的延伸:用户可以在一个输入字段中选择多个项目。
如果可能的话,尽量避开这种类型。我不得不使用它,因为一个超长的分类列表,我晚上醒来后仍然为这个决定出了一身冷汗。理想情况下,人们会希望有一个自动推荐&自动完成的组合。
带分组的下拉菜单
虽然长的下拉菜单并不理想,但你可以将一些项目归类到不同的类别下,这样可以更容易找到你想要的东西。
多重选择菜单
虽然严格来说不是下拉菜单,但多选菜单是一个可以考虑的替代方案。与下拉菜单不同的是,它们从一开始就打开,基本上是一个小小的滚动窗口。
虽然它们在桌面上很好,但对于移动端来说就有点糟糕了,因为它们是一个 "卷轴中的滚动”。
日期选择器
日期选择器应该只用于安排会议、活动等。有一个星期的日期日历可以帮助你决定何时安排早午餐,但如果你想输入护照的到期日期,就会非常烦人。我喜欢那些既可以输入,也可以从下拉菜单中选择的日历--只要确保输入的内容足够聪明,可以在月、日、年之间加上"/",否则就会有点混乱。
3、下拉样式
与下拉类型不同的是,"下拉样式 "指的是下拉的实际外观,而不是它的工作方式。下面我列出了一些常见的样式。
标准样式
我称这种风格为 "标准",因为这是我们最常看到的。
标准样式(分离式)
我越来越多的看到了分离式菜单的风格。这是很有意义的,因为它允许将菜单放在字段的上方或下方,这取决于浏览器的视口。
圆角边框
圆形的边框与具有更多游戏性的UI配合起来效果很好。
带图标
在输入的开头添加一个简单的图标可以让它看起来更有 "设计感"。每当有人抱怨一个表单看起来太无聊时,我就会添加图标。这是一个简单的解决方法。
小贴士:如果有人抱怨长表格看起来很无聊,只需添加图标即可。
带图像
作为一项规则,我避免在下拉菜单中添加图片----只是因为必须更新背后的维护很麻烦,尤其是当它是一个经常变化的列表时。然而,当你想显示事物之间的区别时(狗的品种、蛋糕、办公家具等),它是非常有用的。
然而,我认为,由于下拉式的尺寸有限,很难看清图片是什么(见上图),所以除非你把图片做得非常大,否则通常不值得努力。
Material Design的填充下拉菜单
我是Material Design的忠实粉丝,包括他们的下拉菜单。
在Material Design指南中,"仅限行 "字段已经不再使用,但你仍然会在网上看到它。
仅限行 "字段被替换成了 "已填写的下拉菜单",在用户测试中似乎做得更好。虽然没有那么酷,但更方便用户使用--这就是它的意义所在,伙计们。
Material Design的简要下拉菜单
就像他们的概要文本字段一样,Material Design的简要下拉菜单超级酷。他们的菜单与实际的下拉式容器分离,这可以帮助解决一些可用性问题。
我敢肯定,大家都会看到这个性感的小动画,它的焦点在输入的顶部变小。我还想指出一些经常被(我)忽略的内容:如果查看实际的下拉列表,您会注意到第一项是空白的。这样一来,如果用户想稍后再返回该问题或将其留空,则可以“重置”下拉列表。
4、下拉状态
当用户与任何类型的输入交互时,输入应该切换状态或外观来给用户反馈。这里我们将研究一下下拉菜单的不同状态。
活动状态
活动状态是用户在与下拉菜单交互之前的样子。
禁用状态
如果你禁用了一个输入字段,用户将无法与之交互,但他们可以看到它。如果你的业务规则需要,你可以使用这个功能,但可能不会经常使用。
悬停
如果用户将鼠标悬停在下拉菜单上,它应该表示可以点击。
N00b提示:你不能在触摸设备上悬停,所以如果你是为移动或平板电脑应用设计,就不要设计这些状态。
高亮状态
高亮的状态是指用户在使用分页地图时(这是指用户使用 "tab "导航界面和 "回车 "输入信息时),在选择前突出显示下拉菜单。我们通常看到的是可点击项目上的 "蓝色光环”。
然而,有些网站将高亮和焦点状态结合在一起,这样即使用户不点击 "输入",下拉菜单也会直接打开。我对什么是最好的系统很纠结。从逻辑上讲,将这两种状态结合起来是有意义的;但是,当下拉菜单在没有我明确告诉他们的情况下打开时,我感到非常困惑。还有人有过这样的经验吗?请在评论中告诉我。
焦点状态
焦点状态是指项目可交互的时候。一旦你点击了下拉菜单,它就会打开一个菜单并显示其选项。
虽然我所交互的很多下拉菜单在活动状态和聚焦状态下都会保持箭头指向同一个方向,但我更喜欢切换箭头的方向。我认为它们就像手风琴一样。而且如果你超级酷的话,你可以用动画的方式来改变箭头的方向。
当用户将鼠标悬停在菜单中的项目上时,它应该显示被悬停在哪个选项上。
已完成的输入
一旦用户选择了一个选项,输入端就会自动恢复到活动状态,只是它将显示所选项目。
失败反馈
在自由文本输入的情况下,用户有可能会出现错别字等。但是,由于下拉菜单中的选项是预先设定好的,所以应该只有一种类型的失败反馈:"不完整 "类型,用户只有在填写完表格之前点击 "提交 "按钮,才会收到这种反馈。
5、占位符应该说什么
一般情况下,我会保持与自由文本字段类似的占位符/提示文字。还是不确定?这里有几个选项供您选择。
保持占位符空白
如果其他文本字段没有占位符的话,留空占位符通常是最简单的选择。
在占位符里有一个通用提示
'-选择-'、'选择'等都是下拉菜单中的经典提示。
在占位符里有一个推广词
使用通用的'Select'/'Choose',然后你想让他们选择的东西,这是一种很酷的方式,可以让你的下拉菜单保持一致性,同时也可以给用户一个提示,让他们知道该怎么做。
在占位符中设置一个选项
虽然你可以在下拉菜单中选择一个预选项目,但你必须小心翼翼地确保用户已经看到并阅读了它,否则他们可能会同意一些他们不愿意看到的东西。#classicDarkPatternMove
那么,你应该选择什么方案呢?当有疑问时,选择一致性。如果你的文本字段都有占位符,那就使用占位符。
6、何时不使用下拉菜单(以及何时使用)
这是献给所有让我用下拉菜单输入出生年份的网站:f*****你。我不需要再通过滚动浏览一整个月的列表来提醒我的年龄迅速增长,直到我最终找到我出生的年份。
如果你只有不到5个选项
如果你的选项少于5个,可能更容易使用单选按钮,而不是使用额外的点击来获得所有的列表选项。任何超过五个以上的选项都会开始占用很多空间。
注:有人说,规则是应该少于6个,而不是少于5个,还是让你来判断吧。
如果说打字比选字更方便的话
如果你的用户打字的时间比从下拉菜单中选择东西要少,你真的要问哪个更好吗?例如,对于一个出生日期,输入日期比使用三个单独的下拉菜单更容易。
有时候,开发者可能会反对这样做,因为做一个下拉菜单比设置所有关于用户可以和不能在自由文本字段中输入什么的规则更容易。唉,已经输掉了这场战斗很多次,但我还是继续打好这场战斗。
如果你有两个选项,而且它们是 "开 "和 "关"(或 "是 "和 "否”)。
有一个有两个选项的下拉菜单有点烦人。特别是在 "是/否 "问题上。Toggles可以很好地解决这类问题。
如果选项是数字式的
如果你的选项是数字,你有几个选择。
第一种是,再次让他们打出它。步进器也是有帮助的,但我只有在行为预期到最大5的时候才会建议这样做。否则,你可怜的用户会坐在那里点击到100。
第二种是使用滑块选择值。滑块对于较大的数字或近似值特别有帮助。
如果有很多选择
如果一个下拉菜单有很多选项(如果可能的话,你应该避免这种情况),让用户 "搜索 "他们的选项。最常看到这种类型的行为的时候是国家下拉菜单,因为它们很庞大,但也很容易回答。正如前面提到的,这最好是与自动填写配对。
那么,什么时候应该使用下拉式菜单呢?
一个输入需要满足两个要求才能考虑使用下拉菜单。
1.有六个以上的选项。
2.当选项不是用户直接就能知道的时候。例如,假设你的用户正在上传一个视频,而主机需要知道要在视频中附加什么样的许可证。一般的用户不会知道平台上所有的选项,所以下拉菜单是必要的。
7、原生下拉菜单
当时间和预算紧张时,或者当我们在做MVP时,我们倾向于使用原生或默认选项。拥有自定义的输入是蛋糕上的糖霜,但有时我们没有选项来做那个甜蜜的糖霜。在这种情况下,知道你有什么东西可以用就好了。
当涉及到不同设备之间的可用性时,原生下拉菜单也是比较安全的。
我们的大规模结账可用性测试和基准测试显示,虽然82%的电子商务网站在结账流程中使用自定义设计的下拉菜单,但31%的自定义设计的下拉菜单有明显的可用性问题。
默认值
下面是一些原生下拉式的例子。
从这些例子中可以看到,它们都因平台和浏览器的不同而略有不同。它们并不漂亮,但都很好用。
使用shell
以前我一直把它叫做 "半定制",但最近我发现一篇文章把这个图案叫做外壳,听起来更正式。所以我发誓从今以后要把它称为 "壳",我还发誓要在会议上使用它,并在人们问我它是什么意思的时候,我就会陶醉在它的力量中,这样我就可以炫耀我有多聪明。
但是什么是shell?你会问。shell是指当一个字段看起来是自定义的,但当你点击它时,它使用了原生的下拉菜单样式。这是一个简单的方法,可以让页面的风格与你的品牌保持一致,并降低开发成本。它还可以帮助解决自定义字段带来的所有用户体验问题。
8、无障碍检查表
1.下拉菜单的活动状态(包含标签)是否大于44px(我们把标签包含在其中,因为如果点击标签,下拉菜单应该还能打开)。
2.下拉菜单中的每一行的高度是否大于44px,中间有8px?
3.颜色是否符合标准?
4.你的下拉菜单是否有高亮的状态?
5.确保下拉菜单能在标签地图上工作。
6.如果你确实使用了自定义的下拉菜单,请确保它可以在浏览器视口太低的情况下向上或向下打开。
-
JS 设置下拉列表的值(设置选中项)
2015-11-19 16:01:57在js代码里设置一个下拉列表选中项的方法如下: var obj = document.getElementById('selAppType'); $.each(obj .options, function (i, n) { if (n.value === 'hello') { n.selected = ...在js代码里设置一个下拉列表选中项的方法如下:
或者用JQuery的方法获取:var obj = document.getElementById('selAppType'); $.each(obj .options, function (i, n) { if (n.value === 'hello') { n.selected = true; } });
//获取select选中的 value: $("#id").find("option:selected").text(); $("#id ").val(); //操作select下的所有options $("#id").find("option").each(function(i,n){ //TO DO }); //获取select选中的索引: $("#id").get(0).selectedIndex; //清空 Select: $("#id").empty(); //设置select option项: $("#id").append("<option value='Value'>Text</option>"); //添加一项option $("#id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option $("#id option:last").remove(); //删除索引值最大的Option $("#id option[index='0']").remove(); //删除索引值为0的Option $("#id option[value='3']").remove(); //删除值为3的Option $("#id option[text='4']").remove(); //删除TEXT值为4的Option
-
文本框输入值时过滤显示下拉选项
2016-08-10 17:56:03文本框输入值时,根据输入的值过滤以下拉框形式显示在文本框下面,支持code值一起显示,取值,支持扩展,属于公用。数据源改成自己的根据输入的值过滤查询 -
javascript获取下拉列表框当中的文本值示例代码
2020-10-27 01:43:28需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,下面与大家分享下如何使用js获取下拉列表框文本值,由此需求的朋友可以参考下 -
javascript如何操作HTML下拉列表标签
2020-12-12 14:09:23判断select选项中 是否存在Value=”paraValue”的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中的项 修改select选项中 value=”paraValue”的text为”paraText” 设置select... -
如何将Excel的单元格设置成下拉选项?-excel设置下拉菜单
2021-01-26 15:41:59如何将Excel的单元格设置成下拉选项?-excel设置下拉菜单 作者:乔山办公网日期:2019-09-24 21:13:23 返回目录:excel表格制作 在用Excel表录入数据时,有时需要限制某个字段(也叫列)的值(也叫内容),比如,... -
js动态设置select下拉菜单的默认选中项实例
2020-10-18 04:22:47今天小编就为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
html中option标签(下拉列表选项)的详细介绍
2021-06-11 00:34:00本篇将介绍html中option标签(下拉列表选项)的详细用法,有兴趣的朋友可以了解一下!在网页中,下拉列表是一种很常见的显示效果,你知道在html源代码中是怎样实现的吗?今天小编要介绍的就是跟下拉列表有关的一个标签... -
Labview Xcontrol 下拉列表动态添加
2018-06-24 16:25:11网上搜集了很多关于Labview Xcontrol 方面零零散散的资料, 能用的或者带源码的很少,最近做项目的原因,恰好需要一个给用户选择可以根据输入数组信息, 动态加载和勾选所需的内容的功能, 自己参考部分别人的图片信息, ... -
EXCEL设置下拉选项,选项带颜色
2020-10-15 10:56:04EXCEL设置下拉选项,选项带颜色 老是要用,但是老是记不起来,这次自己记录下。 **第一步:**表格中设置你要的选项,以及对应选项的颜色。 第二步: 选中你要下拉的选项列,数据 — 插入下拉选项 — 对话框中选择... -
DropdownValue:一个将下拉列表转换为下拉列表和文本框的 jQuery 插件。 文本框使您能够编写要选择的选项值...
2021-06-22 01:15:39下拉值 一个将下拉列表转换为下拉列表和文本框的 jQuery 插件。 文本框使您能够编写要选择的选项值,并在您选择新选项时更新。 #用法 $('#mydropdown').ValueSelectBox('init'); -
poi导出excel生成下拉列表
2014-08-20 15:41:25poi作为导出excel常用的工具,方便快捷。对于excel指定下拉列表的列,如何生成呢?本文提供如何生成下拉列表的excel列 -
Axure选择下拉列表选项后添加到文本框效果的实现
2020-12-31 07:07:22做原型图需要一个效果展示给前端,即一个输入框支持通过下拉菜单添加多个选项,如下图:点击添加按钮,展示下拉列表框,选择一个选项后,添加到输入框,支持多次添加。对于Axure,都是现学现用,自己研究了下,找到... -
Excel设置下拉选项
2021-01-27 11:27:19继续点击数据工具组中的【数据验证】选项,从其下拉列表中选择【数据验证】选项。 4 在弹出来的【数据验证】对话框的验证条件中,将【任何值】切换为【序列】。 5 之后在弹出来的来源中写上... -
html 里select 下拉列表中设置默认值怎么写?
2021-06-12 07:38:36设置下拉列表框的默认值:使用关键字selected< select name = "pronvince">< option value ="SH">上海< option value ="BJ">北京< option value ="JS">江苏< option value ="HB" selected... -
html下拉框设置连接 html怎么设置下拉列表必须选择
2021-06-10 09:36:48html下拉框怎么设置默认值设置selected属性就可以,具体的用法,首先打开hbuilder软件,新建一个html文档,里面写入一个select下拉框:然后给select中一个option设置selected属性,设置一些简单的样式,再给body设置... -
JS简单设置下拉选择框默认值的方法
2020-11-28 05:58:56本文实例讲述了JS简单设置下拉选择框默认值的方法。分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = ... -
NPOI设置Excel下拉选项
2017-11-24 14:13:03最近在做一个导出模板的功能,需要...第一种· 直接设置下拉值,不超过255个字符(优点:逻辑简单 ;缺点:有字符限制)· 适用于下拉值为固定值,例如:状态、性别等方法块:public static void SetCellDropdow... -
wps,根据下拉列表选项自动填充颜色
2019-08-08 14:36:181、插入下拉选择项 数据----插入下拉列表 ...新建规则,规则类型选择“只为包含以下内容的单元格设置格式”,设置“单元格值”“等于”下拉菜单选项。 点击“格式”,设置字体和填充颜色。 ... -
JavaScript –从下拉列表中获取选定的值
2020-06-01 18:52:04一个JavaScript示例,向您展示如何从下拉列表中获取选定的值或文本。 下拉框列表。 <select id="country"> <option value="None">-- Select --</option> <option value="ID001">... -
js在编辑框input下根据输入内容显示匹配内容的下拉列表
2016-01-27 22:06:03实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单: 将匹配的内容放在一个div中,input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题: input的onblur中隐藏... -
MFC 下拉列表框的设置
2019-11-06 10:33:27设置下拉列表框: 步骤1:打开VS2015,新建项目工程,选择模块下的Visual C++-->MFC-->MFC应用程序,设定好项目文件名和路径,点击确定。 步骤2:进入应用程序类 型界面。勾选“基于对话框”,在“MFC的... -
javascript级联下拉列表实例代码(自写)
2021-01-19 18:16:351,Select对象。 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options... 我写的一个级联下拉列表: 代码如下: 代