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

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

高洛峰

リリース： 2016-12-05 16:43:12

オリジナル

3258 人が閲覧しました

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

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

次のように:

<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 の [選択] ドロップダウンボックスの選択トリガーイベントと拡張機能について