多选下拉框回显无内容

前端使用vue，项目中使用的是element ui组件，在使用select下拉框多选时，新增记录时select多选下拉框正常使用，没问题。但是在编辑记录时，编辑界面也为select下拉框赋值了，却没有显示数据。

先放一个select多选下拉框编辑时正确的加载数据的显示效果图：

下拉框代码如下：

<el-form-item prop="czfaIds" label="处置方案">

<el-select v-model="formczfaIds" multiple style="width:80%;" placeholder="请选择" clearable :disabled="showControl">

<el-option

v-for="item in czfas"

:key="itemvalue"

:label="itemwsdFamc"

:value="itemid"

/>

</el-select>

</el-form-item>

登录后复制



下拉框中的数据源czfas是一个数组，选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的，所以在编辑界面从后端获取的返回值是一个字符串，首选要把这个字符串转换成数组，绑定到select 的v-model属性上。

代码如下：

// 编辑

queryEditRow(index, row) {

thistitleInfo = '编辑'

thisdialogVisible = true

thisform = Objectassign({}, row)

// 将字符串转换成数组，绑定到select控件的v-model属性上

thisformczfaIds = rowczfaIdssplit(',')

thisshowbtn = true

thisshowControl = false

},

登录后复制



但是发现还是有问题，显示的是选中的方案的id值，而且没有将选择的选项选中。

如下图：

分析：select选择器对数据的显示，是匹配到select下拉框数据源中对应的value值时则会显示相应的label；若是没有匹配到，则显示的是该value。

显然，这里是因为没有匹配到下拉框中的value值，直接显示的这个字段的值。

在浏览器控制台中输出数据源的数据：

在浏览器控制台输出返回的字符串转换成数组后的值：

发现select下拉框中的id 和 v-mode里边绑定的id的数据类型不一致，虽然数据的值是一样的，但是一个是字符串，一个是整型数值。将后端返回的字符串在转换成数组时，转换成整形数组，下拉框即可正确显示。

代码如下：

// 编辑

queryEditRow(index, row) {

thistitleInfo = '编辑'

thisdialogVisible = true

thisform = Objectassign({}, row)

// 将字符串转换成数组，此时是字符串数组

var arrStringCzfaIds = rowczfaIdssplit(',')

// 将字符串数组的每一项转换成Number，生成一个新的数组

var arrIntCzfaIds = []

for (var arrInt in arrStringCzfaIds) {

arrIntCzfaIdspush(parseInt(arrStringCzfaIds[arrInt]))

}

// 将新的Number数组，绑定到select空间的v-model上

thisformczfaIds = arrIntCzfaIds

thisshowbtn = true

thisshowControl = false

},

登录后复制



此时，显示的效果就是本文开头的效果了。

需求：下拉框默认显示20条数据，可使用远程搜索为显示的数据，但是部分用户喜欢滚动选择。

如图所示，el-select官方事件并没有监听滚动的事件，所以我们可以采用vue的directives自定义指令实现。

首选在src也就是mainjs的同级目录下新建一个directivesjs文件

在mainjs中引入并注册

indexvue 在下拉框中加入v-loadmore=“加载事件名”即可实现

注意：其他细节自行注意，例如加载到底或者下拉框有联动等。

您可以选择使用CheckListBox控件。CheckListBox支持多选。

由于不清楚您用什么语言，所以我写了VBnet 、C#net

vbnet Code

' Determine if there are any items checked

If CheckedListBox1CheckedItemsCount <> 0 Then

' If so, loop through all checked items and print results

Dim x As Integer

Dim s As String = ""

For x = 0 To CheckedListBox1CheckedItemsCount - 1

s = s & "Checked Item " & (x + 1)ToString & " = " & CheckedListBox1CheckedItems(x)ToString & ControlCharsCrLf

Next x

MessageBoxShow(s)

End If

C#net Code

// Determine if there are any items checked

if(checkedListBox1CheckedItemsCount != 0)

{

// If so, loop through all checked items and print results

string s = "";

for(int x = 0; x <= checkedListBox1CheckedItemsCount - 1 ; x++)

{

s = s + "Checked Item " + (x+1)ToString() + " = " + checkedListBox1CheckedItems[x]ToString() + "\n";

}

MessageBoxShow (s);

}

vbnet Code

Private Sub Button1_Click(ByVal sender As SystemObject, ByVal e As SystemEventArgs) Handles Button1Click

Dim selectstr As String = ""

For i As Integer = 0 To MeCheckedListBox1ItemsCount - 1

If MeCheckedListBox1GetItemChecked(i) Then

selectstr &= MeCheckedListBox1Items(i)ToString

End If

Next

MsgBox(selectstr)

End Sub

希望能帮到您。

dropdown 下拉菜单，如何获取当前点击下拉菜单的这行数据？

区别：通过command方法直接传当前选中行的整个数据

区别：通过 *** 作当前选中行按钮来获取这行的数据

标签： Vue element-ui

原因：下拉框数据过多，若渲染全部数据，会导致 DOM 数量太多， *** 作卡顿。

解决办法：将获取的数据（allList）和渲染数据（list）分离开，限制渲染数组的长度。

一个三级嵌套就可以搞定

网上的办法大多都是直接在option上写，给option加一个高度，然后overflow: auto，这样会有问题， 因为select本身使用的是element-ui自己的滚动条组件， max-height为274px，一旦option设置高度过大，会出现双重滚动条，而且原生滚动条真的有点丑，其实这里只需要给option加一个height: auto，就可以使用select自带的滚动条，不需要单独再加其他滚动。

发现两个问题

要解决几点

scrollToOption？拿来吧你

很明显，要传入一个option对象，而option的$el属性是一个dom，则表现形式就是一个Vue的实例，我这边直接用querySelector获取一个dom， 传入{ $el: dom }也能用。再然后就是找这个dom，发现当树某一节点被点击时，其class会多一个is-current，那么就可以这样写：

ps: 只针对单选做的，多选还需按照情况改。

现在有一个Id为AreaId的下拉框，要获取它当前选择项的文本和值有以下方法：

方法一：使用JavaScript原生态的方法

1获取值：

var obj=documentgetElementById("AreaId");

for (i=0;i<objlength;i++) {//下拉框的长度就是它的选项数

if (obj[i]selected== true ) {

var text=obj[i]value;//获取当前选择项的 值

}

}

2获取文本：

for (i=0;i<objlength;i++) {//下拉框的长度就是它的选项数

if (obj[i]selected== true ) {

var text=obj[i]text;//获取当前选择项的文本

}

}

方法二：使用JQuery方法(前提是已经加载了jquery库)

1获取值：

2获取文本：

以上就是关于多选下拉框回显无内容全部的内容，包括:多选下拉框回显无内容、Element下拉框实现滚动加载更多功能实现、.net中怎么实现下拉框多选，然后获取选中的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！