ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > ブートストラップ ドロップダウン リストのデフォルト値を設定する方法

ブートストラップ ドロップダウン リストのデフォルト値を設定する方法

リリース: 2019-07-31 09:00:10
オリジナル
9234 人が閲覧しました

ブートストラップ ドロップダウン リストのデフォルト値を設定する方法

#ドロップダウン ボックスから値を取得し、デフォルト値を設定します:

#
<select id="test">
<option value="1">选项一<option>
<option value="2">选项一<option>
...
<option value="n">选项N<option>
</select>
ログイン後にコピー

そのため-jQuery 操作 "select" と呼ばれます。より正確に言うと、jQuery は "option" を制御する必要があります。以下の jQuery コードを見てください:

//最初のオプションの値を取得します

$(&#39;#test option:first&#39;).val();
ログイン後にコピー

/ /最後のオプションの値

$(&#39;#test option:last&#39;).val();
ログイン後にコピー

//2番目のオプションの値を取得

$(&#39;#test option:eq(1)&#39;).val();
ログイン後にコピー

//選択された値を取得

$(&#39;#test&#39;).val();
$(&#39;#test option:selected&#39;).val();
ログイン後にコピー

//オプションを値 2 を選択状態にします

$(‘#test’).attr(‘value’,’2’);
ログイン後にコピー

//最後のオプションを選択するように設定します

$(&#39;#test option:last&#39;).attr(&#39;selected&#39;,&#39;selected&#39;);
$("#test").attr(&#39;value&#39; , $(&#39;#test option:last&#39;).val());
$("#test").attr(&#39;value&#39; , $(&#39;#test option&#39;).eq($(&#39;#test option&#39;).length - 1).val());
ログイン後にコピー

//select の長さを取得します

$(&#39;#test option&#39;).length;
ログイン後にコピー

//オプションを追加します

$("#test").append("<option value=&#39;n+1&#39;>第N+1项</option>");
$("<option value=&#39;n+1&#39;>第N+1项</option>").appendTo("#test");
ログイン後にコピー

//選択した項目の追加と削除

$(&#39;#test option:selected&#39;).remove();
ログイン後にコピー

//選択した項目を削除します(ここでは最初の項目が削除されます)

$(&#39;#test option:first&#39;).remove();、
ログイン後にコピー

//指定された値削除されました

$(&#39;#test option&#39;).each(function(){
if( $(this).val() == &#39;5&#39;){
$(this).remove();
}
});
$(&#39;#test option[value=5]&#39;).remove();
ログイン後にコピー

//最初のグループのラベルを取得します

$(&#39;#test optgroup:eq(0)&#39;).attr(&#39;label&#39;);
ログイン後にコピー

//2 番目のグループの最初のオプションの値を取得します

$(&#39;#test optgroup:eq(1) : option:eq(0)&#39;).val();
ログイン後にコピー

//select が選択されていますデフォルトでは

$("#arrangeClass").find("option[value="+reim.classId+"]").prop("selected",true);
ログイン後にコピー

推奨: ブートストラップ入門チュートリアル

以上がブートストラップ ドロップダウン リストのデフォルト値を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート