ホームページ  >  記事  >  php教程  >  BootStrap の [選択] ドロップダウン ボックスの選択トリガー イベントと拡張機能について

BootStrap の [選択] ドロップダウン ボックスの選択トリガー イベントと拡張機能について

高洛峰
高洛峰オリジナル
2016-12-05 16:43:123247ブラウズ

[選択] ドロップダウン ボックスの問題は、オプションを選択した後、フロントエンドの表示を変更して、どのオプションが選択されたかを知りたいことです。

これは簡単に解決できます:

次のように:

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option>所有申请商家</option>
<option>待审核商家</option>
<option>未通过审核商家</option>
<option>已通过审核商家</option>
</select>
</div>
</div>

JS:

function selectOnchang(obj){ 
//获取被选中的option标签选项 
alert(obj.selectedIndex);
}

ここで使用されているのは onchange と selectedIndex です。

onchange イベントは、フィールドの内容が変更されたときに発生します。
onchange イベントは、ラジオ ボタンやチェック ボックスが変更されたときにトリガーされるイベントにも使用できます。

selectedIndex: ドロップダウン リストで選択された項目のインデックス番号を設定または返します。

このようにして、オプションを変更すると変更イベントがトリガーされます。

効果は図に示すとおりです:

BootStrap の [選択] ドロップダウン ボックスの選択トリガー イベントと拡張機能について

この方法では、どの項目が選択されているかのみを取得できます。どの項目を選択した場合は、特別な情報を送信する必要があります。このとき何をすべきか。

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option value="all">所有申请商家</option>
<option value="check_pending">待审核商家</option>
<option value="no">未通过审核商家</option>
<option value="yes">已通过审核商家</option>
</select>
</div>
</div>

つまり、選択したときにその値を取得したいのですが、この時のやり方です。

これを達成するために使用される方法は 1 つだけですが、他にもたくさんの方法があるはずです。

rreee

レンダリングは次のとおりです:

BootStrap の [選択] ドロップダウン ボックスの選択トリガー イベントと拡張機能について

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。