动态加载select内容 不显示 error

在进行jqm开发时遇到异步加载数据在手机上无法获取的问题,通过将ajax请求设置为同步方式,成功解决了数据加载失败的问题。
最近在做jqm开发过程中需要做一个地址选择器,做成异步加载形式。在web浏览器下一切正常,可是一放到手机上需要异步加载的数据总是获取不到,急呀。
html部分代码

<div data-role="fieldcontain">
<label for="province" class="select">省</label>
<select name="stateProvinceGeoId" id="province" data-native-menu="false">
<option value="">请选择:</option>
<#list provinceGeoList?if_exists as provinceGeo>
<option value="${provinceGeo.geoId?if_exists}"
<#if provinceGeo.geoId==(postalAddress.stateProvinceGeoId)?default("")>selected</#if> >${provinceGeo.geoName}</option>
</#list>
</select>
</div>
<div data-role="fieldcontain">
<label for="city" class="select">市</label>
<select name="cityGeoId" id="city" data-native-menu="false">
<option value="">请选择:</option>
</select>
</label>
</div>

<div data-role="fieldcontain">
<label for="county" class="select">显:</label>
<select name="countyGeoId" id="county" data-native-menu="false">
<option value="">${uiLabelMap.PleaseChoose}</option>
</select>
</div>
======================================================================
js部分代码
$("#province").change(function() {
var provinceValue = $("#province").val();
var city = $("#city");
getGeoSelect("PROVINCE", provinceValue, city);
var county = $("#county");
county.empty();
$("<option value=''>${uiLabelMap.PleaseChoose} </option>").appendTo(county);
county.selectmenu("refresh");
});

$("#city").change(function() {
var cityValue = $("#city").val();
var county = $("#county");
getGeoSelect("CITY", cityValue, county);
});

function getGeoSelect(geoTypeParameter, geoIdParameter, oSelect) {

$.ajax({
url:"<@ofbizUrl>getgeo</@ofbizUrl>" ,
type:"GET",
data:"geoTypeParameter="+geoTypeParameter+"&geoIdParameter="+geoIdParameter,
contentType: "application/json",
success:function (data,status){
alert(status);
$.each(data.geoList, function(i, item) {
var optionKeyValue = "<option value=" + item.geoId + ">" + item.geoName + "</option>";
$(optionKeyValue).appendTo(oSelect);
});
oSelect.selectmenu("refresh");
},
error:function (){
alert("error");
}
});
}
以上代码在浏览器中执行没有问题,但是一到手机上就获取不到数据, 异步请求后error函数总是执行,百思不得其解。无奈只好逛论坛了,终于有所收获呀。
http://forum.jquery.com/topic/dynamically-generated-listview在这个帖子里我找到了解决的办法。

I solved this by doing an synchronous load using the .ajax() method instead, otherwise refreshing the listview will not work because it is not loaded (if done async)


Here's some sample code which worked for me.


$.ajax({ url: "get-new-list-url.php",
async: false,
success: function(data) {
//alert("Loaded content...");
$("#isearch-results").html(data);
$("#search-results-list").listview("refresh");
},
error: function(response, error) {
//alert("Error: " + response + " : " + error)
$("#search-results").html("Unable to load search results.");
}
});


Hope that helps..

根据这个我把我的ajax请求加上async: false, 问题终于解决了。
浪费这么久时间就为了这一句话呀.....无语 留存记录以备后用。
<think>嗯,用户想了解如何在el-select动态显示选项的实现方法或配置教程。首先,我需要回忆一下ElementUI的el-select组件的基本用法。记得el-select通常通过v-model绑定选中的值,而选项是通过el-option子组件来定义的,每个el-option需要value和label属性。 用户提到动态显示,可能是指选项数据是静态写在模板里,而是从后端异步获取,比如通过API请求。这时候需要用到axios或者fetch来获取数据,然后在Vue组件的created或mounted生命周期钩子中调用方法获取数据,并将返回的数据赋值给options数组,再通过v-for循环渲染el-option。 参考用户提供的引用,比如引用[2]提到了在el-table中格式化显示数据,并使用了selectDictLabel方法来转换字典值,这可能涉及到将后端返回的字典数据转换为el-select可用的选项。因此,动态显示选项的关键点可能包括:数据获取、数据绑定、以及可能的格式化处理。 另外,用户可能需要处理选项的懒加载或者搜索功能,但根据问题描述,主要关注动态显示,所以重点应放在异步获取数据并渲染选项上。可能还需要考虑加载状态的处理,比如在数据加载显示加载提示,防止用户操作。 还要注意,el-select的options可能需要是一个数组,里面包含value和label的对象。如果后端返回的数据结构符合这个要求,就需要进行转换。例如,如果后端返回的是{id: 1, name: '选项1'},就需要将其映射为{value: 1, label: '选项1'}。 另外,引用[3]提到的动态表单界面可能与动态选项有关联,比如根据用户的选择动态改变其他选项的内容。但用户的问题比较基础,可能只需要基本的动态加载选项的实现步骤。 总结步骤应该是:1. 在Vue组件中定义options数据;2. 在生命周期钩子中调用获取数据的方法;3. 使用axios获取数据并更新options;4. 在模板中使用v-for渲染el-option;5. 处理可能的加载状态和错误情况。 可能还需要提到如何将选项与表单数据绑定,比如使用v-model绑定选中的值。同时,如果需要根据其他输入动态更新选项,比如级联选择,可能需要使用watch或者触发新的数据获取方法。 最后,根据用户提供的引用,引用[2]中的格式化方法可能用于在显示时转换值,但动态选项的生成可能需要这一步,除非选项的label需要进一步处理。过用户的问题主要在于动态显示选项,所以这部分可能需要深入讨论,但可以作为扩展点提到。 需要确保示例代码正确,比如在created或mounted中调用fetchOptions方法,使用正确的axios语法,处理可能的错误。同时,提醒用户注意数据结构的转换,以及el-select和el-option的正确使用方式。</think>### el-select动态显示选项的实现方法 #### 一、核心实现步骤 1. **数据绑定与异步请求** 使用`v-model`绑定选中值,通过`axios`或`fetch`异步获取选项数据,将数据存储在组件的`options`数组中[^2]。 ```javascript created() { this.fetchOptions(); // 组件初始化时自动加载选项 }, methods: { async fetchOptions() { try { const res = await axios.get('/api/options'); this.options = res.data.map(item => ({ value: item.id, label: item.name })); } catch (error) { console.error('数据加载失败', error); } } } ``` 2. **动态渲染选项** 在模板中使用`v-for`动态生成`el-option`,通过`:key`确保渲染性能[^2]: ```html <el-select v-model="selectedValue" filterable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> ``` 3. **格式化显示(可选)** 若需在表格等场景中显示字典标签,可添加格式化方法[^2]: ```javascript methods: { ddlbFormat(row, column) { return this.options.find(opt => opt.value === row.ddlb)?.label || '-'; } } ``` #### 二、进阶配置 - **搜索优化**:添加`filterable`属性启用本地搜索,或通过`remote`+`filter-method`实现远程搜索 - **懒加载**:结合`@visible-change`事件监听下拉框展开动作,按需加载数据 - **状态反馈**:在加载数据时添加`loading`状态提示: ```html <el-select :loading="isLoading"> <el-option>...</el-option> </el-select> ``` #### 三、典型应用场景 1. 级联选择(如省市区联动) 2. 依赖其他条件的动态选项(如根据商品分类加载子类目) 3. 大数据量下的分页加载(需配合后端接口)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值