`

[easyUI]select如何动态添加option

阅读更多

参考:https://www.cnblogs.com/yangxiong/p/6644966.html

 

Train of thought:

1.Write a API for getting values from json, format like: "abc","123","345"

2.Put the widget init into ajax block

 

 

function appendSenderAddress(){
	var url = '../foo.do';	
	$.ajax({
		url : url,
		type : 'GET',
		success : function(data, status){
			if(data == 'Please login first'){
				return;
			}
			var statusCode = data.code;
			if (statusCode == '0') {
				var value = data.foo;
				console.log('value: ' + value)
				var valueList = value.split(",")
				$.each(valueList,function(i,item){
					console.log(i,item)
					$('#value_list').append("<option value='"+item+"'>"+item+"</option>")
				})
				initWidget()
			} else {
				initWidget()
			}
		}
	});

}

 

function initWidget(){
	var valuetElem = new Choices('#value_list', {
        delimiter: ',',
        editItems: true,
        maxItemCount: 5,
        removeItemButton: true,
      });
}

 PS: Must put the widget init into ajax block, if not the widget can't load the values from API

 

分享到:
评论

相关推荐

    基于easyui 1.4.5的单选和多选框组件

    &lt;select class="easyui-combobox" name="combobox" data-options="options"&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;Option 2&lt;/option&gt; &lt;/select&gt; ``` 同样,`data-options`中的`options`用于...

    easyui combbox 显示默认值

    综上所述,EasyUI Combobox的默认值设置涉及到初始化配置、动态数据加载后的设置以及可能的联动逻辑。在实际应用中,开发者需要根据具体场景灵活运用这些方法,同时关注用户体验和代码的健壮性。

    easyui-textbox和easyui-combobox的onchange事件响应实例

    &lt;select id="combobox" class="easyui-combobox" data-options="onChange:handleComboboxChange"&gt; &lt;option value="Option1"&gt;Option1&lt;/option&gt; &lt;option value="Option2"&gt;Option2&lt;/option&gt; &lt;option value="Option3...

    在easyui-combobox多选模式下加入选择所有选项

    本文将深入探讨如何在EasyUI的Combobox组件中实现多选模式,并添加“选择所有”选项的功能。 Combobox是EasyUI中的一个下拉框组件,它结合了输入框和下拉列表的优点,常用于数据筛选或选择操作。在单选模式下,用户...

    Easyui在treegrid添加控件的实现方法

    在本文中,我们将探讨如何在 Easyui 的 Treegrid 中添加控件,如复选框和下拉选择框。 首先,要实现在 Treegrid 中添加控件,关键在于使用 `formatter` 属性。`formatter` 是一个回调函数,用于自定义单元格的显示...

    jQuery EasyUI的api

    - **内置事件**: EasyUI组件有许多内置事件,如`load`, `resize`, `select`, `unselect`等,可以根据需要进行监听和响应。 5. **数据操作**: - **数据加载**: `$(selector).datagrid('load', params)`用于从...

    easyui页面的例子

    &lt;select id="cc" class="easyui-combobox" name="cc" style="width:200px;"&gt; &lt;option value="CA"&gt;California&lt;/option&gt; &lt;option value="NV"&gt;Nevada&lt;/option&gt; &lt;option value="OR"&gt;Oregon&lt;/option&gt; &lt;option value=...

    可手动输入的select

    1. HTML基础:介绍`&lt;select&gt;`和`&lt;option&gt;`标签的基本用法。 2. JavaScript基础:讲解如何使用JavaScript监听输入事件并动态更新下拉选项。 3. jQuery UI Autocomplete:如果博主使用了这个库,会介绍其基本用法和...

    easyui中combobox后台交互实例

    EasyUI是一个基于jQuery的轻量级前端框架,它提供了一系列易于使用的UI组件,包括Combobox,用于创建下拉列表框,同时支持后台数据加载,实现动态筛选和搜索功能。 **EasyUI Combobox组件** EasyUI的Combobox组件...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    本文介绍在使用jQuery EasyUI框架开发Web界面时,如何为Combo和Combobox组件添加清除值的功能。在很多Web应用中,提供一个清除输入的功能是十分必要的,可以提高用户的交互体验。jQuery EasyUI提供了一套丰富的UI...

    easyui使用技巧

    &lt;select id="combo" class="easyui-combobox"&gt; &lt;option value="0"&gt;Option 1&lt;/option&gt; &lt;option value="1"&gt;Option 2&lt;/option&gt; &lt;option value="2"&gt;Option 3&lt;/option&gt; &lt;/select&gt; ``` JavaScript 代码: ```...

    jsp中select的onchange事件用法实例

    如本文的示例所示,通过`java.sql.ResultSet`对象来获取数据库查询结果,并在while循环中遍历结果集,然后将数据动态添加到select的option标签内。 ```java int count=0; java.sql.ResultSet rs1 = DBManage....

    下拉多选框美化下拉多选框美化下拉多选框美化

    &lt;select id="myComboBox" multiple="multiple" class="easyui-combobox" style="width:200px;"&gt; &lt;!-- 添加选项... --&gt; &lt;/select&gt; ``` 设置`style="width:200px;"`可以调整下拉框的宽度,使其适应页面布局。EasyUI...

    select下拉滚动条

    本文将深入探讨select下拉滚动条的实现、样式定制以及与jQuery EasyUI框架的整合。 1. **基本HTML结构** 创建一个基本的`&lt;select&gt;`元素,包括`&lt;option&gt;`标签来定义每个选项: ```html &lt;select&gt; &lt;option value=...

    select标签设置默认选中的选项方法

    可以使用 JavaScript 来动态创建 Select 标签。例如: `function createSelect(){` `var mySelect = document.createElement("select");` `mySelect.id = "mySelect";` `document.body.appendChild(mySelect);` ...

    jquery easyui 中文文档

    &lt;select id="c1" class="easyui-combobox" data-options="valueField:'id',textField:'name'"&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;/select&gt; ```...

    jQuery EasyUI使用教程:为数据网格创建复杂工具栏.docx

    &lt;select class="easyui-combobox" name="status" style="width:120px"&gt; &lt;option value="1"&gt;启用&lt;/option&gt; &lt;option value="0"&gt;禁用&lt;/option&gt; &lt;/select&gt; ``` 6. **动态更新工具栏**:根据数据网格的状态,我们可以...

    easyUI combobox实现联动效果

    我在做项目时,经常用到...select id=cc class=easyui-combobox name=dept style=width:200px;&gt; &lt;option value=aa&gt;aitem1&lt;/option&gt; &lt;option&gt;bitem2&lt;/option&gt; &lt;option&gt;bitem3&lt;/option&gt; &lt;option&gt;ditem4&lt;/option&gt;

    EasyUI Combobox设置默认值 获取text的方法

    select id='xxx' class=easyui-combobox style=width: 180px;&gt; &lt;option value='1'&gt;第一个&lt;/option&gt; &lt;option value='2' selected=selected&gt;第二个&lt;/option&gt; &lt;option value='3'&gt;第三个&lt;/option&gt; &lt;/select&gt;

    jquery easyui combobox 级联java demo(真正可用)

    &lt;select class="easyui-combobox" id="province"&gt; &lt;option value=""&gt;请选择省份&lt;/option&gt; &lt;/select&gt; &lt;select class="easyui-combobox" id="city"&gt; &lt;option value=""&gt;请选择城市&lt;/option&gt; &lt;/select&gt; ``` 然后,...

Global site tag (gtag.js) - Google Analytics