5

我正在使用 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 可以用来将选择返回到以前的状态，然后再次执行转换？

谢谢，

保罗

4

2 回答 2

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');
于 2012-02-22T09:44:31.743 回答
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');

这可能不是最漂亮的解决方案，但它对我来说非常棒。

于 2012-02-03T12:29:27.770 回答