昨天学到的使用SSM框架时从mysql中查到数据并展示出来的的两个下拉框

来源：互联网发布：联动mpos 机报件软件编辑：程序博客网时间：2024/05/29 19:14

排版不擅长,虽然有强迫症但是表示懒,然后重点说一下,后面的两个才是实现下拉框的代码,其中textFieId的name指的是你需要展示的名称,也就是sql中的列名,例如此时需要展示的是age,则需要写成 textField:'age'

两个办法一个是纯JS做,另一个是input标签+js做的

好,暂且如此,欢迎各位补充,请不要踩说错了可以呼我哈

下拉框中获取到查询到的数据的方法---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------属性:valueFieldstring绑定到该组合框（ComboBox）的 value 上的基础数据的名称。textFieldstring绑定到该组合框（ComboBox）的 text 上的基础数据的名称。groupFieldstring指示要被分组的字段。该属性自版本 1.3.4 起可用。groupFormatterfunction(group)返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。代码实例：$('#cc').combobox({groupFormatter: function(group){return '<span style="color:red">' + group + '</span>';}});modestring定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。urlstring从远程加载列表数据的 URL 。methodstring用来检索数据的 http 方法。dataarray被加载的列表数据。代码实例：<input class="easyui-combobox" data-options="valueField: 'label',textField: 'value',data: [{label: 'java',value: 'Java'},{label: 'perl',value: 'Perl'},{label: 'ruby',value: 'Ruby'}]" />filterfunction定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：q：用户输入的文本。row：列表中的行数据。返回 true 则允许显示该行。代码实例：$('#cc').combobox({filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) == 0;}});formatterfunction定义如何呈现行。该函数有一个参数：row。代码实例：$('#cc').combobox({formatter: function(row){var opts = $(this).combobox('options');return row[opts.textField];}});loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：param：要传到远程服务器的参数对象。success(data)：当获取数据成功时将被调用的回调函数。error()：当获取数据失败时将被调用的回调函数loadFilterfunction(data)返回要显示的过滤数据。该属性自版本 1.3.3 起可用。---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------事件:onBeforeLoadparam在请求加载数据之前触发，返回 false 则取消加载动作。代码实例：// change the http request parameters before load data from server$('#cc').combobox({onBeforeLoad: function(param){param.id = 2;param.language = 'js';}});onLoadSuccessnone当远程数据加载成功时触发。onLoadErrornone当远程数据加载失败时触发。onSelectrecord当用户选择一个列表项时触发。onUnselectrecord当用户取消选择一个列表项时触发。---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------方法:optionsnone返回选项（options）对象。getDatanone返回加载的数据。loadDatadata加载本地列表数据。reloadurl请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。代码实例：$('#cc').combobox('reload');  // reload list data using old URL$('#cc').combobox('reload','get_data.php');  // reload list data using new URLsetValuesvalues设置组合框（combobox）值的数组。代码实例：$('#cc').combobox('setValues', ['001','002']);setValuevalue设置组合框（combobox）的值。代码实例：$('#cc').combobox('setValue', '001');clearnone清除组合框（combobox）的值。selectvalue选择指定的选项。unselectvalue取消选择指定的选项。---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------办法①:<body><input id="tts" class="easyui-combobox"data-options="url: 'game/gg',        valueField: 'id',        textField: 'name',        editable:false,        panelHeight:'auto',        method:'post',        onSelect: function(rec){           console.log(rec.id);        }">        <button id="test3">test3</button><input id="test2"></body><script type="text/javascript">$("#test3").click(function(){console.log("value:",$("#tts").combobox("getValue"),"text:",$("#tts").combobox("getText"))</script>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------办法②:<script type="text/javascript">$('#test2').combobox({    url:'game/gg',    method:'post',    editable:false,    valueField:'id',    textField:'name',    panelHeight:'auto',    onSelect: function(rec){        console.log(rec.id)    }});</script>

0 0