1

ドロップダウンフィールドを変更したいと思います。これは通常のもので非常に簡単ですが、Foundation はそれをカスタム ドロップダウン フィールドに置き換えます。

ここにHTMLコード：

<div class="row">
   <div class="small-centered columns">
  <select name="language" id='customDropdown' class='large languageDropdown'>
         <option value="de">German</option>
         <option value="en">English</option>
         <option value="ca">Castelliano</option>
         <option value="es">Spanisch</option>
         <option value="fr">Französisch</option>
         <option value="pt">Portugisisch</option>
      </select>
   </div>
</div>

これは、財団がそれから作るものです：

<div class="row">
<div class="small-centered columns">
    <select name="language" id="customDropdown" class="large languageDropdown hidden-field" data-id="1375994037026-oNYTe">
                <option value="de">German</option>
                <option value="en">English</option>
                <option value="ca">Castelliano</option>
                <option value="es">Spanisch</option>
                <option value="fr">Französisch</option>
                <option value="pt">Portugisisch</option>
           </select>
           <div class="custom dropdown large languageDropdown" data-id="1375994037026-oNYTe">
              <a href="#" class="current">German</a>
              <a href="#" class="selector"></a>
              <ul>
                  <li class="selected">German</li>
                  <li class="">English</li>
                  <li class="">Castelliano</li>
                  <li class="">Spanisch</li>
                  <li class="">Französisch</li>
                  <li class="">Portugisisch</li>
              </ul>
           </div>
  </div>
 </div>

私のJavascriptの試み：

1. $('#customDropdown').val(jd.language);

正常に動作しますが、隠しフィールドでのみ - フォームを送信すると、正しい言語がサーバーに送信されます。ただし、表示されるドロップダウン フィールドにはまだ古い値が表示されます。

2. $('#customDropdown').val(jd.language).trigger('change');

残念ながら、それは機能しません。ここでは魅力的に機能しますが、私のコードで機能しない理由を見つけることができません。

3. $('#customDropdown').val(jd.language).change(); Foundation.libs.forms.refresh_custom_select('.languageDropdown', true);

これにより、Javascript エラーがスローされます。

キャッチされていない TypeError: オブジェクト .languageDropdown にはメソッド 'next' がありません

4. $('#customDropdown').val(jd.language); $(ドキュメント).foundation();

基盤のJavaScriptを更新すると思っていましたが、そうではありません。...

アイデアが不足している (多分私は sth を監督していますか? - それを見つけるのを手伝ってくれることを願っています) ただし、1 つの興味深い点: フォームを送信すると、送信ページにリダイレクトされます。ブラウザ ボタンを使用して戻る場合: .... 出来上がり! - 正しいドロップダウン フィールドが表示されます。しかし、それは私が望むものではありません:P

4

1 に答える 1

6

Zurb は、サンプル ソリューションが最初に投稿されてから (Foundation 2.2)、いくつかの変更を加えました。Foundation 4 では、次の関数呼び出しを使用して、「カスタム」スタイルの選択ボックスの更新を要求できます。

Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);

$('.languageDropdown') を、リフレッシュする元の選択ボックスのセレクターに置き換えます。また、この関数を呼び出す前に、元の (非表示の) 選択ボックスを更新したことを確認してください。したがって、あなたの場合、非表示の選択ボックスを更新するために次を呼び出してから、Foundation による更新をトリガーします。

$('.languageDropdown').val('en');
Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);
于 2013-08-09T00:13:35.883 に答える