XSLT中jquery.dropdown.js使用及disabled/selected属性报错解决

报错根因 #

两个属性缺失值的报错不是jquery.dropdown.js插件本身的问题，是XSLT渲染的语法校验规则导致的：

• XSLT遵循严格的XML语法规范，不支持HTML中布尔属性的简写写法（即直接写disabled/selected省略属性值的形式），所有属性必须显式声明属性值
• 现有代码中<option value=" " disabled selected></option>使用了HTML原生布尔属性简写，无法通过XSLT语法校验，直接抛出属性值缺失错误
• 现有option配置存在逻辑错误：需要默认选中、禁用的选项没有挂载对应属性，反而给空值选项加了禁用、选中标记，真正要标识为Selected/Disabled的选项未配置对应属性
• 原代码存在重复value的option项，会导致插件识别选项错乱，选中、禁用状态匹配异常

jquery.dropdown.js 核心构造特性 #

• 插件初始化时会自动隐藏原生<select>节点，基于原select的option配置生成自定义下拉DOM结构，会自动识别select标签上的multiple="multiple"属性开启多选模式
• 多选模式支持标签式展示已选项、关键词搜索、选择数量限制等能力，所有功能参数在初始化时传入即可生效
• 插件会完整读取原生option上的标准属性：value对应选项提交值，selected标记默认选中项，disabled标记不可选项，不需要额外通过JS配置传入选中、禁用规则
• 选项变化时插件会自动同步更新原生select的状态，表单提交时可以直接按原select的name属性取值，不需要额外做数据拼接

修复后的正确代码 #

HTML结构（适配XSLT语法要求） #

所有布尔属性统一使用属性名="属性名"的完整XML规范写法，移除重复value的option，把selected、disabled属性挂载到正确的选项上：

<div class="demo">
<select style="display:none" name="tstate_next_ttype11" multiple="multiple">
    <option value=" "></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">Selected</option>
    <option value="4" disabled="disabled">Disabled</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
</div>

注意：XSLT环境下所有HTML布尔属性都必须遵循上述完整写法，比如checked要写为checked="checked"，readonly要写为readonly="readonly"，否则都会触发属性值缺失的校验错误。

JS初始化配置 #

原有初始化配置没有逻辑问题，可以直接使用：

$('.demo').dropdown({
    readOnly: false,
    limitCount: Infinity,
    multipleMode: 'label',
    input: '<input type="text" maxLength="20" placeholder="Search">',
    searchable: true,
    searchNoData: '<li style="color:#ddd">No Results</li>',
    choice: function () {}
});

使用注意事项 #

• 不要在同一个select下配置重复value的option，否则会导致插件匹配选中、禁用状态时出现错乱
• 空值占位选项不要添加disabled、selected属性，否则会导致多选模式下默认清空操作失效
• 如果需要动态修改选项的选中、禁用状态，不要直接操作插件生成的自定义DOM，直接修改原生select对应option的属性，再调用插件的刷新方法即可同步视图状态

内容的提问来源于stack exchange，提问作者mariia tishchenko