如何通过JQUERY获得下拉框的显示值？多选下拉框回显无内容

本文目录

• 如何通过JQUERY获得下拉框的显示值
• 多选下拉框回显无内容
• c#查询代码中的下拉框的代码怎么写，
• 求关于下拉框的代码！！
• 网页上怎么做下拉框
• 如何在Asp.net中实现多彩下拉框
• 如何让select下拉还可以输入
• 如何用jsp做个树形下拉框

如何通过JQUERY获得下拉框的显示值

通过获取元素的text实现功能。关键的两个jquery函数为：

$("select").val();  // 选中项目的value值。

$("select option:checked").text(); // 选中项目的显示值。

实例演示如下：

1、设计简单的一个下拉框代码，包括【男】【女】两个值。代码如下：

此时页面展示效果如下：

2、设计一个函数，通过点击按钮，将当前选中的下拉框的值和显示的文字，都选取出来，并分别赋值给两个input，函数代码如下：

此时，选取男，然后点击，展示效果如下：

如果选择女，展示效果如下：

扩展资料：

带有预先选定的选项的下拉列表：HTML 《option》 标签的 selected 属性。

定义和用法：

selected 属性规定在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置，也可以在页面加载后通过 JavaScript 设置 selected 属性。

实例：

《select》

《option》Volvo《/option》

《option selected="selected"》Saab《/option》

《option》Mercedes《/option》

《option》Audi《/option》

《/select》

多选下拉框回显无内容

前端使用vue，项目中使用的是element ui组件，在使用select下拉框多选时，新增记录时select多选下拉框正常使用，没问题。但是在记录时，界面也为select下拉框赋值了，却没有显示数据。先放一个select多选下拉框时正确的加载数据的显示效果图：下拉框代码如下：《el-form-item prop="czfaIds" label="处置方案"》 《el-select v-model="form.czfaIds" multiple style="width:80%;" placeholder="请选择" clearable :disabled="showControl"》 《el-option v-for="item in czfas" :key="item.value" :label="item.wsdFamc" :value="item.id" /》 《/el-select》《/el-form-item》登录后复制下拉框中的数据源czfas是一个数组，选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的，所以在界面从后端获取的返回值是一个字符串，首选要把这个字符串转换成数组，绑定到select 的v-model属性上。代码如下： // queryEditRow(index, row) { this.titleInfo = ’’ this.dialogVisible = true this.form = Object.assign({}, row) // 将字符串转换成数组，绑定到select控件的v-model属性上 this.form.czfaIds = row.czfaIds.split(’,’) this.showbtn = true this.showControl = false },登录后复制但是发现还是有问题，显示的是选中的方案的id值，而且没有将选择的选项选中。如下图：分析：select选择器对数据的显示，是匹配到select下拉框数据源中对应的value值时则会显示相应的label；若是没有匹配到，则显示的是该value。显然，这里是因为没有匹配到下拉框中的value值，直接显示的这个字段的值。在浏览器控制台中输出数据源的数据：在浏览器控制台输出返回的字符串转换成数组后的值：发现select下拉框中的id 和 v-mode里边绑定的id的数据类型不一致，虽然数据的值是一样的，但是一个是字符串，一个是整型数值。将后端返回的字符串在转换成数组时，转换成整形数组，下拉框即可正确显示。代码如下： // queryEditRow(index, row) { this.titleInfo = ’’ this.dialogVisible = true this.form = Object.assign({}, row) // 将字符串转换成数组，此时是字符串数组 var arrStringCzfaIds = row.czfaIds.split(’,’) // 将字符串数组的每一项转换成Number，生成一个新的数组 var arrIntCzfaIds = for (var arrInt in arrStringCzfaIds) { arrIntCzfaIds.push(parseInt(arrStringCzfaIds)) } // 将新的Number数组，绑定到select空间的v-model上 this.form.czfaIds = arrIntCzfaIds this.showbtn = true this.showControl = false },登录后复制此时，显示的效果就是本文开头的效果了。

c#查询代码中的下拉框的代码怎么写，

你是想问下拉框怎么绑定数据吗？

 DataTable dt = new DataTable();            dt.Columns.Add("Id",typeof(int));           //添加列            dt.Columns.Add("Name", typeof(string));            dt.Rows.Add("1", "刘备");       //添加行            dt.Rows.Add("2", "关羽");            dt.Rows.Add("3", "张飞");            dt.Rows.Add("4", "赵云");            dt.Rows.Add("5", "黄忠");            comboBox1.DisplayMember = "Name";    //在下拉框中显示的文字            comboBox1.ValueMember = "Id";               comboBox1.DataSource = dt;

求关于下拉框的代码！！

给你个例子，里面的数据自己改下==============================《html》 《head》 《/head》 《body》 《script language="JavaScript"》 《!-- //第一维:第一个下拉列表的值 //第二维:表示下拉列表中看到的字符串 //第三维:表示下拉列表中的值 var subcat = new Array(); //如果大类的值是动态的,则可以通过数据库中取出作如下设置 //subcat = new Array(’《%=trim(rs("leemaid"))%》’,’《%=rs("leemaconte nt")%》’,’《%=rs("leemacontent")%》’); subcat = new Array(’1’,’电视机’,’=1’) subcat = new Array(’1’,’电风扇’,’=2’) subcat = new Array(’1’,’电饭煲’,’=3’) subcat = new Array(’1’,’电炒锅’,’=4’) subcat = new Array(’1’,’电灯’,’=5’) subcat = new Array(’1’,’电脑’,’=6’) subcat = new Array(’1’,’电冰箱’,’=7’) subcat = new Array(’1’,’洗衣机’,’=8’) subcat = new Array(’1’,’微波炉’,’=9’) subcat = new Array(’1’,’VCD影碟机’,’=1’) subcat = new Array(’2’,’二极管’,’=11’) subcat = new Array(’2’,’三极管’,’=12’) subcat = new Array(’2’,’CMOS集成块’,’=13’) subcat = new Array(’2’,’电阻’,’=14’) subcat = new Array(’2’,’电容’,’=15’) subcat = new Array(’2’,’整流二极管’,’=16’) subcat = new Array(’2’,’整流桥’,’=17’) subcat = new Array(’2’,’可控硅’,’=18’) subcat = new Array(’2’,’电子枪’,’=19’) subcat = new Array(’2’,’光敏二极管’,’=2’) subcat = new Array(’3’,’ffffff’,’vvvvvv’) subcat = new Array(’3’,’dddddd’,’ffffff’)function changeselect1(selectValue) { document.form1.s2.length = 0;//初始化下拉列表 清空下拉数据 //document.form1.s2.options = new Option(’请选择二级小类’,’’);//给第一个值 for (i=0; i《subcat.length; i++)//legth=2 { if (subcat 第一列 第二列 { document.form1.s2.options); } } } //--》 《/script》《form name="form1"》 二级联动： 《select name="s1" onChange="changeselect1(this.value)"》 《option》请选择一级大类《/option》 《option value="1"》家用电器《/option》 《option value="2"》电子元器件《/option》 《option value="3"》ddddd《/option》 《/select》 《select name="s2" onChange="alert(this.value)"》 《option》请选择二级小类《/option》 《/select》 《/form》 《/html》

网页上怎么做下拉框

网页下拉框可以通过以下方法实现：工具/原料Frontpage软件前期准备工作：1 打开Frontpage软件，单击菜单栏“插入”——表单——下拉框。2 在“设计”模式下，把页面上的“提交”和“重置”按钮删除掉。3 在“设计”模式下，双击下拉框，弹出“下拉框属性”对话框，单击“添加”按钮。4 在弹出的“添加选项”对话框中，在选项中写上“AAA”，单击“确定”。5 用同样的方式添加“BBB”和“CCC”2个选项，在“下拉框属性”对话框，单击“确定”按钮。END添加 onchange 效果：1 把刚才制作好的下拉框，切换到代码模式。2 在代码中找到《select size="1" name="D1"》并修改为“《select onchange="window.location.href=this.options.value " size="1" name="D1"》”。END制作菜单链接： 在代码中找到：“《option value="AAA"》AAA《/option》《option value="BBB"》BBB《/option》《option value="CCC"》CCC《/option》”，把value="AAA"（"BBB"和"CCC"）变为value="网址1.htm"（"网址2.htm"和"网址3.htm"）。2 切换到“预览”模式，就可以看到菜单的效果了。

如何在Asp.net中实现多彩下拉框

　　 开发背景    有人曾经要我开发一个根据不同选择而显示不同颜色的管理工具 我开始考虑利用下拉框来实现条目背景及显示颜色根据条目名称不同而进行变化 根据这个思路我在网上搜了半天也没有找到任何相关的解决方案 最后我想到了一个比当初需求要复杂的方案（包括数据库） 所以我尝试着找到一个更简单的实现方案       该文主要是演示如何读取系统颜色并在下拉框中的每个条目中显示对应的颜色 该源码主要展示以下内容    如何获得System Drawing KnownColor颜色控件的列表枚举    如何排除系统环境颜色 如 Active Border    如何分配颜色到下拉框的每个条目      代码详解    命名下拉框为ddlMultiColor 来显示颜色名称及颜色 用《div》标签显示右侧矩形结果 Aspx代码如下

　　   《table》    《tr》    《td》    《asp:DropDownList ID = ddlMultiColor    OnSelectedIndexChanged= ddlMultiColor_OnSelectedIndexChanged    runat= server AutoPostBack= true 》    《/asp:DropDownList》    《/td》    《td》    《div id= msgColor runat= server 》    《/div》    《/td》    《/tr》   《/table》 

　　在cs文件中我们需要引用以下命名空间

　　   using System;   using System Web;   using System Reflection;   using System Drawing;   using System Collections Generic; 

　　我们先看一下Page_Load事件 在Page_Load中我们对选中的下拉列表进行处理显示

　　   protected void Page_Load(object sender EventArgs e)   {    if (Page IsPostBack == false)    {    populateDdlMultiColor(); //    colorManipulation();    }   } 

　　现在让我们来看一下populateDdlMultiColor() 函数

　　   private void populateDdlMultiColor()   {    ddlMultiColor DataSource = finalColorList();    ddlMultiColor DataBind(); //liudao 翻译   }       finalColorList()方法   private List finalColorList()   {    string = member Name;    }       List finalColorList = new List();       foreach (string color in allColors)    {    if (Array IndexOf(systemEnvironmentColors color) 《 )    {    finalColorList Add(color);    }    }    return finalColorList;   } 

　　System Drawing KnownColor是系统本身自带颜色 我已经通过枚举列出了这些颜色并通过 finalColorList()函授进行绑定 为了实现该功能 我使用了最基本的枚举特征之一 Enum GetNames() 共享方法 该方法对枚举内容进行检测并输出结果为字符串序列 该字符串中每个值都对应枚举中的每个结果    然而 该方法还是有些问题的 按照上面的思路 枚举金额过中会包括系统环境颜色 比如 Active Border(注 活动边框) 为了解决该问题 我扩展了系统环境颜色 我用了System Reflection MemberInfo类    这里我用System Drawing SystemColors属性填充systemEnvironmentColors 然后创建一个名称为finalColorList 的图形列表 在finalColorList 中我只调用已知颜色 但是不在系统环境颜色中 然后把finalColorList绑定到ddlMultiColor中 至此 我们已经有了一个包括全部颜色名称的下拉框 下面让我们来操作一下

　　   private void colorManipulation()   {    int row;    for (row = ; row 《 ddlMultiColor Items Count ; row++)    {    ddlMultiColor Items Value);    }    ddlMultiColor BackColor =    Color FromName(ddlMultiColor SelectedItem Text);//liudao翻译   } 

　　下拉框中的每一行背景颜色的Style]属性都与该行显示的颜色名称对应的 在OnSelectedIndexChanged 事件中下拉框中被选中的行通过下面的函数结合《div》标签进行高亮显示 同时右侧的矩形颜色也随之变化

如何让select下拉还可以输入

HTML结构

下面是一个基本的select下拉框。

此外还需要加载jQuery库和jquery.editable-select.js文件，在源码下载包里已经有了。

只需要以下代码就能实现传统的下拉框变成有输入功能的下拉框了。

其实我们细看插件代码就会发现，作者是将原有的select处理了下，变成了一个输入表单text和一个列表ul。这样text可以输入，下拉选项则用ul面板，这样一来ul里的选项就可以添加任意html代码了，demo中有示例。然后通过使用CSS以及js技术可以实现下拉弹出、输入查找匹配功能。

filter：过滤，即当输入内容时下拉选项会匹配输入的字符，支持中文，true/false，默认true。

effects：动画效果，当触发弹出下拉选择框时的下拉框展示过渡效果，有default，slide，fade三个值，默认是default。

duration：下拉选项框展示的过渡动画速度，有fast，slow，以及数字（毫秒），默认是fast。

onCreate：当输入时触发。

onShow：当下拉时触发。

onHide：当下拉框隐藏时触发。

onSelect：当下拉框中的选项被选中时触发。

事件调用方法：

此外，还支持键盘方向键、回车键、Tab键以及Esc键操作。

如何用jsp做个树形下拉框

用jsp做树形下拉框可以用java自定义标签实现。

参考代码如下：

package com.moonNigh.tagSupport;import java.io.IOException;***隐藏网址***import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.TagSupport;/** * * * 树形下拉选择控件 * */public class SelectorTag extends TagSupport {    private static final long serialVersionUID = 9878861374414215L;        //标签name属性    private String name;        //所需图片的路径    private String imgPath;        //所需javascript文件的路径    private String scriptPaht;        //所需css文件的路径    private String cssPath;        //项目的根路径    private String rootPath;        //标签的value属性    private String value;    private String text;    private String path;        /*     * 标签的actionUrl属性     * 联想查询结果数据通过向actionUrl属性指定的url请求得到     */    private String actionUrl;        private HttpServletRequest request=null;            public String getActionUrl() {        return actionUrl;    }    public void setActionUrl(String actionUrl) {        this.actionUrl = actionUrl;    }    public String getValue() {        return value;    }    public void setValue(String value) {        this.value = value;    }    public String getImgPath() {        return imgPath;    }    public void setImgPath(String imgPath) {        this.imgPath = imgPath;    }    public String getScriptPaht() {        return scriptPaht;    }        public void setScriptPaht(String scriptPaht) {        this.scriptPaht = scriptPaht;    }    public String getCssPath() {        return cssPath;    }        public void setCssPath(String cssPath) {        this.cssPath = cssPath;    }            public String getText() {        return text;    }    public void setText(String text) {        this.text = text;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public SelectorTag()    {            }            /**     * 初始化变量     */    private void initAbttributes()    {        request=(HttpServletRequest)this.pageContext.getRequest();        rootPath=request.getContextPath();        this.imgPath="/images/";        this.scriptPaht="/js/";        this.cssPath="/css/";            }    @Override    public int doStartTag() throws JspException {        initAbttributes();        path=rootPath+"/jsp/tags/treeSelectorPage.jsp?id="+id+"&actionUrl="+actionUrl;        JspWriter out=pageContext.getOut();        try {            String tName=name;            //引入javascript文件            out.println("《script type=’text/javascript’ charset=’GB2312’ src=’"+rootPath+scriptPaht+"selector.js’》《/script》");                        //引入css文件            out.println("《link rel=’stylesheet’ href=’"+rootPath+cssPath+"selector.css’ type=’text/css’ /》");                        StringBuilder tag=new StringBuilder("《input type=’text’ ");            tag.append("id=’").append(id).append("’");            tag.append(" value=’").append(text==null?"":text).append("’");            tag.append(" onclick=’return showSelector(\"");            tag.append(id).append("\",\"").append(path).append("\")’ readonly》");            tag.append("《input type=’hidden’ name=’")            .append(tName).append("’ id=’").append(id).append("_value")            .append("’ value=’").append(value==null?"":value).append("’》");            out.println(tag.toString());        } catch (IOException e) {            e.printStackTrace();        }        return SKIP_BODY;    }        }

运行结果：