8

Select Menu ウィジェットを使用して、フォーム内に状態のリストを表示しています。

<select name="state" id="state">
   <option value = "">Select State</option>
   <option value = "Alabama">Alabama</option>
   <option value= "Alaska">Alaska</option>
   <option value= "Arizona">Arizona</option>
   <option value= "California">California</option>
   <option value= "Colorado">Colorado</option>
   <option value= "Connecticut">Connecticut</option>
 </select>

私のスクリプトでは

 $( "#state" ).selectmenu();

今、私がやろうとしているのは、選択したオプションの値のアラートを送信することです。だから私はこれを持っています：

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    alert(valueSelected);
});

問題は、JQueryUI関数を使用すると、何らかの理由でそれが機能しないことですselectmenu()

その1行を削除すると、すべてが正常に機能します。$( "#state" ).selectmenu();JQuery UI のテーマと機能を利用するために含める必要があることは、私の理解でした 。

問題が何であるかについて誰かが私に教えてくれますか。繰り返しますが、selectmenu の行を削除すると問題なく動作します。

ありがとう！

4

2 に答える 2

12

jQuery UI はオリジナルを非表示にし、<select>動的に挿入された要素を使用してカスタム ウィジェットを作成します。<option>したがって、提供した元の をクリックすることはなくなり、changeイベントはトリガーされません。

代わりにselectmenuchange、選択したアイテムが変更されたときにイベントを発行します。changeプラグインの初期化中にハンドラー関数をオプションに渡すことで、それをリッスンできます。

コールバック関数に渡される 2 番目の引数のitemプロパティは、選択したアイテムを参照します。以下に示すように、その値にアクセスできます。

$("#state").selectmenu({
  change: function(event, ui) {
    alert(ui.item.value);
  }
});
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<select name="state" id="state">
  <option value="">Select State</option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Arizona">Arizona</option>
  <option value="California">California</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
</select>

次のように、このイベントを手動でリッスンすることもできます。

$('select').on('selectmenuchange', function (e,ui) {
   alert(ui.item.value);
});
于 2014-11-02T09:27:38.157 に答える
0

select コールバックを指定して selectmenu を初期化します。

これを試して。

$( "#state" ).selectmenu({
  select: function( event, ui ) {}
});

または、古いバージョンのjquery-uiプラグインを使用している可能性があります。selectmenuプラグインをサポートしているかどうかを確認してください。

以下を試してください。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
于 2014-11-02T05:50:45.640 に答える