问题1：如何使用chosen美化select
Html
js
相关配置如下
使用前提，别忘记引用相关css文件和js文件！！！！
问题2：select选项动态加载
常见方式1：选项后台返回，采用模板渲染方式加载选项
步骤一：编写模板
步骤二：模板渲染
步骤三：chosen初始化（同问题1中的js代码）
常见方式2：采用动态方式添加
步骤一：后台返回，动态添加选项
步骤二：chosen初始化（同问题1中的js代码）
问题3：默认无选项选择，提示请选择
方法1：选项中默认配置一个空值且默认选中
方法2：data-placeholder = “请选择”
问题4：select如何设置默认值,设置不可选，取值等操作问题
未美化：
①获取select选中的 value:$("#ddlregtype").val();
②获取select 选中的 text :$("#ddlregtype").find("option:selected").text();
③获取select选中的索引:$("#ddlregtype").get(0).selectedIndex;
④设置Select的Text值为jQuery的项选中：$("#select_id option[text='jQuery']").attr("selected", true)
⑤模板渲染设置默认选中值：后台返回是否选中标识
⑥设置select不可选:$('select').prop('disabled', true)
美化后：
①取值可同未美化，另可用change方法中获取当前选中值
②赋值，采用未美化的手动赋值而非未美化方式⑤，需要更新chosen.即赋值完成后添加以下代码$(selectId).trigger("chosen:updated");
③设置不可选
方法1：同美化后②方法，先采用未美化方式，再更新chosen
方法2：无可选选项$("chosen_one").chosen({ max_selected_options: -1});
问题5：select美化后如何和validate结合实现实时校验
步骤1：validate验证，由于真实的select元素在初始化后display：none,需要配置ignore
注：rule和message中的“select_name”为表单控件的name非id;建议name和id保持一致！！！！！！
步骤2：验证不通过，给chosen添加不通过样式。两步骤完成后，由于真正的select元素display:none,无法获取聚焦失焦，只有点击提交按钮才进行验证
步骤3：实时校验。将select的失焦转换为chosen下拉框收起时校验
网友评论