select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザは選択された項目を送信するか、カンマで区切られた複数のオプションを 1 つのパラメータ リストに収集し、<select> フォーム データをサーバーに送信するときに name 属性を含めます。 1. 基本的な使い方: コードをコピー コードは次のとおりです。<選択> <option value ="volvo">ボルボ</option> <option value ="saab">サーブ</option> <option value="opel">オペル</option> <option value="audi">アウディ</option> </選択> このうち、</option>タグは省略してページ内で使用できる。 コードをコピー コードは次のとおりです。<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> <OPTION VALUE="0">すべて <OPTION VALUE="1">湖北テレビ大学オンライン学習センター <OPTION VALUE="2">成都師範大学オンライン学習センター <OPTION VALUE="3">武漢職業技術大学オンライン学習センター </選択> 次に、Select 要素では複数の項目を選択することもできます。次のコードを参照してください。 コードをコピー コードは次のとおりです。//複数属性がある場合は、複数の項目を選択できます。 <select name= “教育” id=”教育” multiple=”複数”> <option value=”1”>高校</option> <option value=”2”>大学</option> <option value=”3”>医師</option> </選択> //以下には複数の属性はありません。表示されるのは 1 つの項目のみで、複数の選択は許可されません。 <名前を選択= “教育” id= “教育” > <option value=”1”>高校</option> <option value=”2”>大学</option> <option value=”3”>医師</option> </選択> //以下はsize属性を設定した場合です。size=3の場合は3つのデータが表示されます。複数選択はできないので注意してください。 <select name="教育" id="教育" size='3'> <option value="0">小学校</option> <option value="1">中学校</option> <option value="2">高校</option> <option value="3">技術中等学校</option> <option value="4">大学</option> <option value="5">学士号</option> <option value="6">大学院生</option> <option value="7">医師</option> <option value="8">ポスドク</option> <option selected>選択してください</option> </選択> 3. 複数選択 Select コンポーネントに関連するすべての一般的な操作: 1. 選択オプションに指定された値を持つアイテムがあるかどうかを判定する コードをコピー コードは次のとおりです。@param objSelectId 検証するターゲット選択コンポーネントのID @param objItemValue 存在を検証する値 関数 isSelectItemExit(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); var isExit = false; if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i<objSelect.options.length;i++) { objSelect.options[i].value == objItemValueの場合{ isExit が true である。 壊す; } } } isExit を返します。 } 2. 選択オプションにアイテムを追加する コードをコピー コードは次のとおりです。@param objSelectId アイテムに追加するターゲット選択コンポーネントのID @param objItemText 追加するアイテムの内容 @param objItemValue 追加するアイテムの値 関数 addOneItemToSelect(objSelectId,objItemText,objItemValue) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { // この値の項目が選択リストに既に存在するかどうかを判定します if(isSelectItemExit(objSelectId,objItemValue)) { $.messager.alert('prompt message','この値を持つオプションはすでに存在します!','info'); } それ以外 { var varItem = 新しいオプション(objItemText、objItemValue); objSelect.options.add(varItem); } } } 3. 選択オプションから選択した項目を削除します。複数選択と複数削除をサポートします。 コードをコピー コードは次のとおりです。@param objSelectId 削除するターゲット選択コンポーネントID 関数removeSelectItemsFromSelect(objSelectId) { var objSelect = document.getElementById(objSelectId); var delNum = 0; if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i<objSelect.options.length;i=i+1) { if(objSelect.options[i].selected) { objSelect.options.remove(i); delNum = delNum + 1; i = i - 1; } } (delNum <= 0 )の場合 $.messager.alert('プロンプトメッセージ','削除するオプションを選択してください!','情報'); } それ以外 { $.messager.alert('prompt message',''+delNum+' オプションを正常に削除しました!','info'); } } } 4. 指定した値で選択オプションからアイテムを削除します。 コードをコピー コードは次のとおりです。@param objSelectId 検証するターゲット選択コンポーネントのID @param objItemValue 存在を検証する値 関数removeItemFromSelectByItemValue(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { //存在するかどうか判断する if(isSelectItemExit(objSelect,objItemValue)) { for(var i=0;i<objSelect.options.length;i++) { objSelect.options[i].value == objItemValueの場合{ objSelect.options.remove(i); 壊す; } } $.messager.alert('プロンプトメッセージ','正常に削除されました!','情報'); } それ以外 { $.messager.alert('プロンプトメッセージ','指定された値のオプションが存在しません!','情報'); } } } 5. 選択中のすべてのオプションをクリアする コードをコピー コードは次のとおりです。@param objSelectId クリアするターゲット選択コンポーネントID 関数 clearSelect(objSelectId) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i<objSelect.options.length;) { objSelect.options.remove(i); } } } 6. 選択したすべての項目を取得し、すべての値を文字列にまとめ、値の間にカンマを入れます。 コードをコピー コードは次のとおりです。@param objSelectId ターゲット選択コンポーネント ID @return 選択範囲内のすべての項目の値をカンマで区切って返します 関数 getAllItemValuesByString(objSelectId) { var selectItemsValuesStr = ""; var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { var 長さ = objSelect.options.length for(var i = 0; i < 長さ; i = i + 1) { (0 == i)の場合{ selectItemsValuesStr = objSelect.options[i].value; } それ以外 { selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; } } } selectItemsValuesStr を返します。 } 7. 1つの選択範囲で選択したすべてのオプションを別の選択範囲に移動する コードをコピー コードは次のとおりです。@param fromObjSelectId モバイルアイテムの元の選択コンポーネントID @param toObjectSelectId 移動アイテムが移動するターゲット選択コンポーネントID 関数moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { var objSelect = document.getElementById(fromObjSelectId); var delNum = 0; if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i<objSelect.options.length;i=i+1) { if(objSelect.options[i].selected) { 選択する項目を追加します(toObjectSelectId、objSelect.options[i].text、objSelect.options[i].value) objSelect.options.remove(i); i = i - 1; } } } } 8. すべてのオプションを1つの選択から別の選択に移動する コードをコピー コードは次のとおりです。@param fromObjSelectId モバイルアイテムの元の選択コンポーネントID @param toObjectSelectId 移動アイテムが移動するターゲット選択コンポーネントID 関数moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { var objSelect = document.getElementById(fromObjSelectId); if (null != objSelect) { for(var i=0;i<objSelect.options.length;i=i+1) { 選択する項目を追加します(toObjectSelectId、objSelect.options[i].text、objSelect.options[i].value) objSelect.options.remove(i); i = i - 1; } } } |
<<: この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。
>>: アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス
今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...
目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...
この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...
Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...
目次1. 概要1. 原則2. 実装3. スレーブインスタンスを作成する4. マスタースレーブ構成要約...
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...
アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...
この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが...
この記事の例では、WeChatアプレットの日付と時刻コンポーネントの具体的なコードを参考までに共有し...
Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...
1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...
glibc は、gnu によってリリースされた libc ライブラリ、つまり c ランタイム ライブ...
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...