select标签中可能会有很多数据关联,在不考虑它们顺序的情况下,解决方法
showOptions:在不考虑合法性的情况下,将options的条件全部显示在文档中,之前被选中的option还被选中,执行checkOptions():检测文档的条件合法性,不合法的选项将会被删除
$(document).ready(function(){
(function(){
var Main = {//主控对象
init:function(){
}
};
var Search = {//查询对象
options: [],
tempOptions:[],
init: function(){
this.getOptions();
this.showOptions();
this.checkOptions();
this.eventAttach();
},
getOptions: function(){
//OM:option 码
this.options = {
XWLB:{
type: "OM",
n: "学位类别",//中文名字
o: [//options value,显示名字,合法条件
["","不限",""],
["201","哲学博士学位","{type} == 1 || {type} == 5"],
["202","经济学博士","{ZYDM} == '010101' || {ZYDM} == '010102'"]
]//选项
},
ZYDM:{
type: "OM",
n: "专业代码",
o: [
["","不限",""],
["010101","Max主义哲学",""],
["010102","Max主义哲学",""]
]
}
};
},
showOptions: function(s){
var html = "<table><tr>";
var n = 0;
for(var i in this.options){
n ++;
if(!(n % 3)) html += "</tr><tr>";
var op = this.options[i];
html += "<td>" + op.n + "</td>";
switch(op.type){
case "OM": {
html += "<td><select id='" + i + "' name='" + i + "'>";
var temp = $("#" + i).val();//得到原来的selected被选中的选项
for(var j in op.o){
var o = op.o[j];
if(temp == o[0]){//被选中的依然被选中,如果合法
html += "<option selected='selected' id='i" + o[0] + "' value='" + o[0] + "'>" + o[1] + "</option>";
}else html += "<option id='i" + o[0] + "' value='" + o[0] + "'>" + o[1] + "</option>";
}
html += "</select>";
}
break;
}
html += "</td>";
}
html += "</tr></table>";
$(".right").html(html);
this.eventAttach();
},
checkOptions: function(){//将不合法的剔除掉
for(var i in this.options){
var op = this.options[i];
switch(op.type){
case "OM":{
for(var j in op.o){
var o = op.o[j];
if(o[2] != ""){//检测条件
var flag = eval(o[2].replace(/{([A-Za-z0-9_]+)}/g,"$('#$1').val()"));
if(!flag) $("#i" + o[0]).remove();//若不合法,剔除吧
}
}
}break;
}
}
},
getParameter: function(){
},
eventAttach: function(){
var _this = this;
$(".right select").change(function(){
_this.showOptions();
_this.checkOptions();
});
},
unbindEvent: function(){
$(".right select").unbind("change");
}
};
Search.init();
})();
});
分享到:
相关推荐
2. **获取`<option>`元素数组**:利用`selectElement.options`属性,我们可以得到一个`HTMLOptionElement`对象的数组,包含了所有`<option>`元素。 3. **定义排序规则**:决定是按照option的文本、值还是其他属性...
除了上述基本步骤之外,还可以探索更多高级特性,比如动态生成Select Options、使用多种数据类型等。这些主题可以进一步深化您对Webdynpro for ABAP中Select Options的理解和应用能力。 #### 结论 在Webdynpro for ...
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时,这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突,即用户不能在多个select中选择相同的值。以下是对这个问题的...
然后,通过`.options`属性可以访问到`<select>`元素中的所有`<option>`对象,它是一个`HTMLOptionsCollection`对象。 2. **HTMLOptionsCollection**:这是HTML DOM中一个特殊的数组,包含了`<select>`元素的所有`...
在本例中,我们通过一个简单的Web Dynpro ABAP实例来展示如何实现ALV控件,并且集成select options来筛选数据。 知识点: 1. 创建Web Dynpro ABAP组件 创建一个Web Dynpro组件是开发Web Dynpro应用的第一步。组件...
将spree_variant_options_select添加到您的Gemfile中: gem 'spree_variant_options_select' 捆绑您的依赖项并运行安装生成器: bundle bundle exec rails g spree_variant_options_select:install 测验 确保...
在视图属性的“Used Controllers/Components”选项卡中,添加之前定义的两个Select_Options组件。 #### 2.4 定义属性 在视图中定义所需的属性。这通常包括控件的名称、类型以及其他配置参数。例如,可以定义一个...
在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...
在网页开发中,`<select>`元素用于创建一个下拉菜单,用户可以从预定义的选项中选择一个。然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法...
`<select>`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`<option>`元素定义了下拉列表中的一个选项。例如: ```html <select id="customSelect"> <option value="option1">Option 1 ...
标题“Select Tag's options process”涉及的是HTML Select元素的操作,特别是关于动态添加Option选项的过程。在Web开发中,Select元素用于创建下拉列表,而Option元素则是列表中的各个选项。这个话题通常与...
在网页开发中,下拉列表框(`<select>`元素)是常见的用户输入控件,它通常包含一组`<option>`元素,用户可以从中选择一个或多个选项。在处理这些下拉列表时,我们常常需要获取用户选定的`<option>`的`value`属性和...
`<select>`标签是HTML中用于创建下拉列表的元素,通常用于提供多个选项供用户选择。然而,标准的`<select>`元素并不支持用户直接输入自定义文本。为了实现一个既可输入又可编辑的下拉框效果,开发者通常会采用一些...
在网页开发中,`<select>` 标签用于创建下拉菜单,它是表单元素的一种,通常用于提供用户从预定义选项中选择一个或多个值。实现`<select>`的各种搜索功能,可以极大地提高用户体验,让用户能快速找到所需选项。在...
$('.custom-select .select-options').on('mouseleave', function() { $(this).slideUp(); // 鼠标离开时收起下拉列表 }); }); ``` 以上代码示例展示了基本的实现思路,但实际应用中可能需要根据项目需求进行...
在这个"Bootstrap-selectpicker多选框插件的demo源码"中,我们可以学习到如何在项目中集成和使用这个插件。 首先,Bootstrap-selectpicker提供了多选功能,允许用户在下拉菜单中选择多个选项。这在需要用户输入一组...
#### 描述:Javascript 操作 select 是表单中常见的一种,删除多个 select 值时出现的问题及解决方案 在处理 `<select>` 元素时,特别是在动态地增加或删除选项时,需要注意索引的变化对操作的影响。例如,在删除多...
1. **多选支持**:与Select2类似,`vue-select`也支持多选模式,用户可以通过按住Ctrl或Shift键来选择多个选项。 2. **搜索过滤**:当选项数量过多时,`vue-select`提供了一个内置的搜索框,允许用户输入关键词来...