web-dev-qa-db-ja.com

jQuery UI selectmenuのオプションを動的に選択する方法は？

メニューを通常の選択からjQuery selectmenuに変更した後、プログラムでオプションを選択できなくなりました。これを行う方法はありますか？

選択するコードは（ListIdがリストの実際のIDであると想定）

$('#ListId').val(value);

プラグインは次のようにアクティブ化されます：

$("#ListId").selectmenu({ style: "dropdown", width:140 });

選択メニューでアイテムを選択する方法はありますか？同じ.val（value）関数を呼び出すと、適切にスタイル設定されたjQuery selectmenuではなく、非表示の元の選択リストの値が選択されます。

jqueryjquery-uijquery-ui-selectmenu
19
Jamie
$('#ListId').selectmenu("value", value);
23
Brandon Joyce

この部分を以前に一度実行したと仮定します。

$("#ListId").selectmenu({ style: "dropdown", width:140 });

私はこの作品を見つけました：

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

これにより、様式化されたドロップダウンに正しい値が表示されます。

17
Coder_X

さらに、変更呼び出しを追加することで、変更イベントハンドラーをトリガーできます。

$('#ListId').selectmenu("value", value);
$('#ListId').selectmenu("change"); // Add this for a change event to occur
2
Jojje

この方法を使用してオプションを選択するには、indexes（値ではない）を使用する必要があることに注意してください。

たとえば、この選択が与えられます。

_<select id="ListId">
   <option value="value-one">One</option>
   <option value="value-two">Two</option>
</select>
_

この場合、式$('#ListId').selectmenu("value", "value-two");は結果を返しません。その代わりに、$('#ListId').selectmenu("value", "2");を使用する必要があります。つまり、select内の要素の位置/インデックスを使用する必要があります。価値ではありません！

ただし、インデックスを見つけるのは簡単です。次の行を使用してそれを実現できます。

_var index = $('#ListID option[value="value-two"]').index();
$('#ListId').selectmenu("value", index);
_
1
proph

私は次の方法を試しました、そしてそれは私の状況でうまくいきます

$('#ListId').find('option[value=""]').attr("selected", true);

[〜＃〜]または[〜＃〜]

$('#ListId').prop('selectedIndex', 0);
0
Nimesh

私は次のことを試しましたが、私の状況ではうまくいきません

1。

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

2。

$('#ListId').selectmenu("value", value);

3。

var option = $("#ListID option")
option.attr("selected", true);
// option.prop("selected", true);
// option.attr("selected", "selected");
// option.prop("selected", "selected");
$('#ListId').selectmenu("refresh");

更新、選択中.... etc。状況によっては機能しません。

したがって、私は押します ctrl+I chromeでソースコードを確認します。次のコードを使用して状況を解決します。

// Set Component Separator   jQuery UI SelectMenu
componentSeparatorPlaceHolder.find(".ui-selectmenu-text").html(inputComponentSeparatorStr); 
// Set ComponentSeparatorDropDown
componentSeparator.val(inputComponentSeparatorStr);
0
Kevin Lin