`
王斌_code
  • 浏览: 33058 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

多个options关联,select之间乱序

阅读更多
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();
})();
});

分享到:
评论

相关推荐

    JS 将select options 排序

    2. **获取`&lt;option&gt;`元素数组**:利用`selectElement.options`属性,我们可以得到一个`HTMLOptionElement`对象的数组,包含了所有`&lt;option&gt;`元素。 3. **定义排序规则**:决定是按照option的文本、值还是其他属性...

    Webdynpro for ABAP中select option 用法

    除了上述基本步骤之外,还可以探索更多高级特性,比如动态生成Select Options、使用多种数据类型等。这些主题可以进一步深化您对Webdynpro for ABAP中Select Options的理解和应用能力。 #### 结论 在Webdynpro for ...

    Vue: 多个el-select不能重复选择相同属性

    当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时,这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突,即用户不能在多个select中选择相同的值。以下是对这个问题的...

    javascript操作Select标记中options集合

    然后,通过`.options`属性可以访问到`&lt;select&gt;`元素中的所有`&lt;option&gt;`对象,它是一个`HTMLOptionsCollection`对象。 2. **HTMLOptionsCollection**:这是HTML DOM中一个特殊的数组,包含了`&lt;select&gt;`元素的所有`...

    web dynpro alv实例(含select options)

    在本例中,我们通过一个简单的Web Dynpro ABAP实例来展示如何实现ALV控件,并且集成select options来筛选数据。 知识点: 1. 创建Web Dynpro ABAP组件 创建一个Web Dynpro组件是开发Web Dynpro应用的第一步。组件...

    spree_variant_options_select

    将spree_variant_options_select添加到您的Gemfile中: gem 'spree_variant_options_select' 捆绑您的依赖项并运行安装生成器: bundle bundle exec rails g spree_variant_options_select:install 测验 确保...

    WDA Tutorial 02_ Using Select Options in a WDA Application

    在视图属性的“Used Controllers/Components”选项卡中,添加之前定义的两个Select_Options组件。 #### 2.4 定义属性 在视图中定义所需的属性。这通常包括控件的名称、类型以及其他配置参数。例如,可以定义一个...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...

    JS模拟select下拉菜单

    在网页开发中,`&lt;select&gt;`元素用于创建一个下拉菜单,用户可以从预定义的选项中选择一个。然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`&lt;select&gt;`下拉菜单。这种方法...

    select option带自定义图片

    `&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一个选项。例如: ```html &lt;select id="customSelect"&gt; &lt;option value="option1"&gt;Option 1 ...

    Select Tag's options process

    标题“Select Tag's options process”涉及的是HTML Select元素的操作,特别是关于动态添加Option选项的过程。在Web开发中,Select元素用于创建下拉列表,而Option元素则是列表中的各个选项。这个话题通常与...

    select value options

    在网页开发中,下拉列表框(`&lt;select&gt;`元素)是常见的用户输入控件,它通常包含一组`&lt;option&gt;`元素,用户可以从中选择一个或多个选项。在处理这些下拉列表时,我们常常需要获取用户选定的`&lt;option&gt;`的`value`属性和...

    html select 可输入 可编辑

    `&lt;select&gt;`标签是HTML中用于创建下拉列表的元素,通常用于提供多个选项供用户选择。然而,标准的`&lt;select&gt;`元素并不支持用户直接输入自定义文本。为了实现一个既可输入又可编辑的下拉框效果,开发者通常会采用一些...

    实现select各种搜索功能

    在网页开发中,`&lt;select&gt;` 标签用于创建下拉菜单,它是表单元素的一种,通常用于提供用户从预定义选项中选择一个或多个值。实现`&lt;select&gt;`的各种搜索功能,可以极大地提高用户体验,让用户能快速找到所需选项。在...

    div模拟select自定义下拉列表框(jQuery)

    $('.custom-select .select-options').on('mouseleave', function() { $(this).slideUp(); // 鼠标离开时收起下拉列表 }); }); ``` 以上代码示例展示了基本的实现思路,但实际应用中可能需要根据项目需求进行...

    Bootstrap-selectpicker多选框插件的demo源码

    在这个"Bootstrap-selectpicker多选框插件的demo源码"中,我们可以学习到如何在项目中集成和使用这个插件。 首先,Bootstrap-selectpicker提供了多选功能,允许用户在下拉菜单中选择多个选项。这在需要用户输入一组...

    js 动态新增改变删除select的值

    #### 描述:Javascript 操作 select 是表单中常见的一种,删除多个 select 值时出现的问题及解决方案 在处理 `&lt;select&gt;` 元素时,特别是在动态地增加或删除选项时,需要注意索引的变化对操作的影响。例如,在删除多...

    vueselect一个原生Vuejs组件提供类似于的Select2功能

    1. **多选支持**:与Select2类似,`vue-select`也支持多选模式,用户可以通过按住Ctrl或Shift键来选择多个选项。 2. **搜索过滤**:当选项数量过多时,`vue-select`提供了一个内置的搜索框,允许用户输入关键词来...

Global site tag (gtag.js) - Google Analytics