我正在使用jqTransform插件来设置表单元素的样式,这导致我的选择框出现轻微问题。看起来隐藏了选择框,并由包含列表等的自定义DIV替换。
当从列表中选择某些内容时,我设法让插件触发select的click事件,但是我在更新可视列表时遇到了一些麻烦 - 看来插件不支持ajax更新了框。
有没有人有过对jqTransform转换的选择执行ajax更新的经验?
转化后的选择看起来像:
<div class="jqTransformSelectWrapper" style="z-index: 8; width: 63px; ">
<div>
<span style="width: 62px; ">Petrol</span><a href="#" class="jqTransformSelectOpen"></a> </div>
<ul style="width: 63px; height: 24px; overflow-x: hidden; overflow-y: hidden; display: none; visibility: visible; ">
<li><a href="#" index="0" class="selected">Petrol</a></li></ul>
<select id="fuel_type_id" name="fuel_type[id]" class="jqTransformHidden" style=""><option value="1">Petrol</option></select>
</div>
该插件不会转换已经转换的选择(您可以通过删除jqTransformHidden类来强制它,但这只是复制了可见的选择)。
我想知道是否有一些聪明的jquery可以用来将select返回到它的前状态然后再次执行转换?
谢谢,
保
答案 0 :(得分:16)
以下是为我做的:
function fix_select(selector) {
var i=$(selector).parent().find('div,ul').remove().css('zIndex');
$(selector).unwrap().removeClass('jqTransformHidden').jqTransSelect();
$(selector).parent().css('zIndex', i);
}
fix_select('select#my_updated_select_box');
答案 1 :(得分:0)
通过应用此修复程序可以轻松触发on change事件:
http://www.polemus.net/2011/06/jqtransform-option-change-not-firing.html
为了更新,我遇到了同样的问题。我修复了一个额外的函数,我在原始选择更新后调用。
看起来如下所示:
function fix_select(selector) {
selectedVal = $(selector).children(':selected').val();
$(selector).children('option').removeAttr('selected');
$(selector).children('option[value="'+selectedVal+'"]').attr('selected','selected');
$(selector).removeClass('jqTransformHidden');
$(selector).css('display','block');
$(selector).prev('ul').remove();
$(selector).prev('div.selectWrapper').remove();
var selectElm = $(selector).closest('.jqTransformSelectWrapper').html();
$(selector).closest('.jqTransformSelectWrapper').after(selectElm);
$(selector).closest('.jqTransformSelectWrapper').remove();
$(selector).closest('form').removeClass('jqtransformdone');
$(selector).closest('form').jqTransform();
}
更新选择选项后,只需触发以下代码:
fix_select('select#my_updated_select_box');
这可能不是最漂亮的解决方案,但它对我来说非常棒。