1

データベースからさまざまなリストオプションをロードする選択ボタンがあります。

この選択ボタンをブートストラップの選択ピッカーに変換します。レンダリングすると、元の選択オプションが非表示になり、独自のビューが作成されます。

私の選択オプションは id を値としてレンダリングし、以下のようにレンダリングされます。

<option value="38">option 1</option>

<option value="37">option 2</option>

<option value="36">option 3</option>

しかし、ブートストラップの UI を見ると、このような data-original-index というオプションがあります

<li data-original-index="1">option 1</li>

<li data-original-index="2">option 2</li>

<li data-original-index="3">option 3</li>

これは元のオプションとはどこにも関係がなく、選択したオプションの値を取得するときに上記のレンダリングが問題を引き起こします。

オリジナルのオプションの値で data-original-index の値をレンダリングする方法はありますか??? どんな提案も大歓迎です！

4

1 に答える 1

2

onchange イベントを元の選択に添付できます。ブートストラップはその選択に結び付けられています。したがって、ブートストラップ選択からオプションを選択すると、選択した値を取得できます。

$(this).find("option:selected").attr("value");この行は、選択されたオプションを探し、属性を返しますvalue。

次の例を参照してください。

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").attr("value");
    alert(selected);
  });
  
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker">
   <option value="38">option 1</option>
   <option value="37">option 2</option>
   <option value="36">option 3</option>
</select>

于 2015-03-09T21:03:41.693 に答える