5

jqTransform プラグインを使用してフォーム要素のスタイルを設定しているため、選択ボックスにわずかな問題が発生しました。選択ボックスが非表示になっていて、リストなどを含むカスタム DIV に置き換えられているようです。

リストから何かが選択されたときにプラグインが選択のクリックイベントを発生させることができましたが、視覚的なリストを更新するのに少し問題があります.プラグインはすぐに使用できる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 に答える