jquery 根据url创建下拉框

开发工具与关键技术： VS MVC基础
作者：卢雅婷
撰写时间：2019/06/07

关于下拉框的使用我们已经很平常，哪绑定数据的下拉框是如何创建的呢？因为绑定数据数目的不确定性，所以我们一般不会直接创建，而是封装好这个类。
今天为了更好地理解如何封装jquery 根据url创建下拉框的方法，我会直接讲解一个下拉框的绑定案例。

如下图，第一个字段就是下拉框数据的绑定事件

要完成这个功能，首先要创建HTML的样式

消费项目名称： ---请选择--- 接着要到控制器中写一个查询这个字段所有数据的方法，再将它返回给页面，如下图所示

最后就是下拉框绑定数据了，直接用封装好的的方法绑定，
createSelect(“InConsumptionName”,
“/ClientRelationManagement/ProtocolType/SelectConsumptionName”);
InConsumptionName是select标签的ID,第二个参数则是查询该字段方法的路径链接。
说完其的使用方法，接着我们说如何封装这个方法。
/**

• jquery 根据url创建下拉框
• @param fromId form表单id
• @param url 查询下拉框的url
• @param value 设置值
  */
  如下图所示，第一个参数为select标签的ID,第二个是链接，第三个是值。

function createSelect(selectId, url, value) {
//console.log(defaultValue);
再用post的提交方法，再判断，下拉框获取的ID不为零，若为true，则 将其selectId = ‘#’ + selectId;，再清空该元素，内部前置内容，创建option，接着用for in 语句循环出需要的option数量并且绑定数据
$.post(url, function (jsonData) {
if (selectId.indexOf(’#’) != 0) {
selectId = ‘#’ + selectId;
}
$(selectId).empty();//清空该元素
//内部前置内容
$(selectId).prepend(’’ + “–请选择–” + ‘’);
//创建option
for (k in jsonData) {
$(selectId).append(’’ + jsonData[k].text + ‘’);
}
//设置选中值
if (value != undefined && value != null && value != ‘’) {
$(selectId).val(value);
判断value不为空，并获取其值
}
});
}
jquery 根据url创建下拉框就这样完成了，鄙人学之尚浅，如有不对之处，请给予矫正，感谢阅读。

标签：jquery,url,创建,绑定,value,selectId,下拉框
来源： https://blog.csdn.net/weixin_44538353/article/details/91355931