JavaScript での HTML (選択オプション) の詳細な説明 1. 基本的な理解: コードをコピー コードは次のとおりです。var e = document.getElementById("selectId"); e. options = new Option("text","value"); // オプション オブジェクトを作成します。つまり、<select> タグ内に 1 つ以上の <option value="value">text</option> を作成します。 //options は配列で、<option value="value">text</option> のような複数のタグを保存できます。 1: options[]配列のプロパティ: 長さ属性---------長さ属性 selectedIndex プロパティは、現在選択されているボックス内のテキストのインデックス値です。このインデックス値は、(最初のテキスト値、2 番目のテキスト値、3 番目のテキスト値、4 番目のテキスト値..........) に対応するメモリ (0、1、2、3.....) によって自動的に割り当てられます。 2: 単一オプションのプロパティ (---obj.options[obj.selecedIndex] は指定された <option> タグであり、--- です) テキスト属性---------テキストを返す/指定する value 属性------ <options value="..."> と一致する値を返す/指定します。 インデックス属性-------添え字を返します。 selected プロパティは、オブジェクトが選択されているかどうかを返します/指定します。true または false を指定することで、選択されている項目を動的に変更できます。 defaultSelected プロパティ-----オブジェクトがデフォルトで選択されているかどうかを返します。真偽。 3: オプション メソッドは <option> タグを追加します-----obj.options.add(new("text","value")); <option> タグを削除します-----obj.options.remove(obj.selectedIndex)<delete> <option> タグのテキストを取得します-----obj.options[obj.selectedIndex].text<查> <option> タグの値を変更します-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change> すべての <option> タグを削除します-----obj.options.length = 0 <option> タグの値を取得します-----obj.options[obj.selectedIndex].value 知らせ: a: 上記のメソッドは、IE および FF と互換性があるため、obj.funciton ではなく obj.options.function() として記述されています。たとえば、obj.add() は IE でのみ有効です。 b: obj.option 内の option は大文字にする必要はありませんが、new Option 内の Option は大文字にする必要があります。 2. 応用 コードをコピー コードは次のとおりです。<html> <ヘッド> <スクリプト言語="javascript"> 関数番号(){ var obj = document.getElementById("mySelect"); //obj.options[obj.selectedIndex] = new Option("My Food","4"); //現在選択されている値を変更する //obj.options.add(new Option("My food","4"));別のオプションを追加する //alert(obj.selectedIndex); //シリアル番号を表示します。オプションは自分で設定します //obj.options[obj.selectedIndex].text = "My food"; 値を変更する //obj.remove(obj.selectedIndex); 削除関数 } </スクリプト> </head> <本文> <select id="mySelect"> <option>私のバッグ</option> <option>私のノートブック</option> <option>私のオイル</option> <option>私の重荷</option> </選択> <input type="button" name="button" value="結果を表示" onclick="number();"> </本文> </html> 1. 動的に選択を作成する コードをコピー コードは次のとおりです。関数createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2. オプションを追加 コードをコピー コードは次のとおりです。関数addOption(){ //IDでオブジェクトを検索します。 var obj = document.getElementById('mySelect'); //オプションを追加 obj.add(new Option("text","value")); //これはIEでのみ有効です obj.options.add(new Option("text","value")); //これはIEとFirefoxと互換性があります } 3. すべてのオプションを削除する コードをコピー コードは次のとおりです。関数removeAll(){ var obj = document.getElementById('mySelect'); obj.options.length=0; } 4. オプションを削除する コードをコピー コードは次のとおりです。関数removeOne(){ var obj = document.getElementById('mySelect'); //index、削除するオプションのシリアル番号、ここでは現在選択されているオプションのシリアル番号です var index=obj.selectedIndex; obj.options.remove(インデックス); } 5. オプションオプションの値を取得する コードをコピー コードは次のとおりです。var obj = document.getElementById('mySelect'); var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します var val = obj.options[index].value; 6. オプションのテキストを取得する コードをコピー コードは次のとおりです。var obj = document.getElementById('mySelect'); var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します var val = obj.options[index].text; 7. オプションの変更 コードをコピー コードは次のとおりです。var obj = document.getElementById('mySelect'); var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します var val = obj.options[index]=new Option("新しいテキスト","新しい値"); 8. 選択を削除 コードをコピー コードは次のとおりです。関数removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" content="text/html"> <ヘッド> <スクリプト言語=JavaScript> 関数 $(id) { document.getElementById(id) を返します。 } 関数 show() { var selectObj=$("エリア") var myOption = document.createElement("オプション") myOption.setAttribute("値","10") myOption.appendChild(document.createTextNode("上海")) var myOption1 = document.createElement("オプション") myOption1.setAttribute("値","100") myOption1.appendChild(document.createTextNode("南京")) selectObj.appendChild(myOption) selectObj.appendChild(myOption1) } 関数選択() { var index=$("area").selectedIndex; var val = $("area").options[index].getAttribute("value") (値==10の場合) { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) var sh = document.createElement("選択") sh.add(新しいオプション("浦東新区","101")) sh.add(新しいオプション("黄埔区","102")) sh.add(新しいオプション("徐匯区","103")) sh.add(新しいオプション("普陀区","104")) $("コンテキスト").appendChild(sh) } (値==100の場合) { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) var nj = document.createElement("選択") nj.add(新しいオプション("玄武地区","201")) nj.add(new Option("白下区","202")) nj.add(新しいオプション("下関地区","203")) nj.add(新しいオプション("栖霞地区","204")) $("コンテキスト").appendChild(nj) } } 関数calc() { var x = $( "コンテキスト")。childNodes.length-1; 警告(x) } 関数削除() { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) } </スクリプト> <本文> <div id="コンテキスト"> <select id="area" オン 変更="選択肢()"> </選択> </div> <input type=button value="表示" onclick="表示()"> <input type=button value="ノードを計算" onclick="calc()"> <input type=button value="削除" onclick="remove()"> </本文> </html> これらを踏まえて、JQEURY AJAX+JSON を使用して次のような小さな機能を実装しました。 JSコード: (SELECTに関連するコードのみ取得) コードをコピー コードは次のとおりです。/** * @description コンポーネントリンクドロップダウンリスト(JQUERYのAJAXとJSONを使用して実装) * @prarm selectId ドロップダウンリストID * @prarm method 呼び出されるメソッドの名前 * @prarm temp ソフトウェアIDはここに保存されます * @prarm url ジャンプ先のアドレス */ 関数linkAgeJson(selectId,method,temp,url){ $j.ajax({ type: "get", //バックエンドにアクセスするにはgetメソッドを使用します dataType: "json", //json形式でデータを返します url: url, //アクセスするバックエンドアドレス data: "method=" + method+"&temp="+temp, //送信するデータ success: function(msg){//msgは返されるデータであり、ここでデータバインディングが行われます var データ = msg.lists; 選択した ID とデータを含む coverJsonToHtml をカバーします。 } }); } /** * @description JSONデータをHTMLデータ形式に変換する * @prarm selectId ドロップダウンリストID * @prarm nodeArray は JSON 配列を返します * */ 関数 coverJsonToHtml(selectId,nodeArray){ //選択を取得 var tempSelect=$j("#"+selectId); //選択値をクリア isClearSelect(選択ID,'0'); var tempOption=null; for(var i=0;i<nodeArray.length;i++){ //選択オプションを作成する tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> '); //選択するオプションを入れる tempSelect.append(tempOption); } // 劣化したコンポーネントのリストを取得します getCpgjThgl(selectId, 'thgjDm'); } /** * @description ドロップダウンリストの値をクリアします * @prarm selectId ドロップダウンリストID * @prarm index クリアを開始する添え字の位置 */ 関数 isClearSelect(selectId,index){ var length=document.getElementById(selectId).options.length; while(長さ!=インデックス){ //長さは再取得する必要があるため変更されます 長さ=document.getElementById(selectId).options.length; for(var i=index;i<length;i++) document.getElementById(selectId).options.remove(i); 長さ=長さ/2; } } /** * @description 縮退したコンポーネントのリストを取得します * @prarm selectId1はソフトウェアドロップダウンリストのIDを参照します * @prarm selectId2 縮退コンポーネントのドロップダウンリストのID */ 関数 getCpgjThgl(selectId1,selectId2){ var obj1=document.getElementById(selectId1); //参照ソフトウェアのドロップダウンリスト var obj2=document.getElementById(selectId2); // コンポーネントのドロップダウンリストを縮退する var len=obj1.options.length; //参照されたソフトウェアリストの長さが1に等しい場合は、何もせずに戻ります 長さ==1の場合{ false を返します。 } // ドロップダウンリストの値をクリアします。どちらの方法でも問題ありません // isClearSelect(selectId2,'1'); ドキュメント.getElementById(selectId2).length=1; for(var i=0;i<len; i++){ var オプション = obj1.options[i]; //参照ソフトウェアが選択されており、含まれていません if(i!=obj1.selectedIndex){ //OPTIONを複製してSELECTに追加します obj2.appendChild(option.cloneNode(true)); } } } HTMLコード: コードをコピー コードは次のとおりです。<表の幅="100%" 境界線=0 配置="左" セルパディング=0 セル間隔=1> <tr> <td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用ソフトウェア:</td> <td class="Search_content_82"> <input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" > <入力名="yyrjDm" id="yyrjDm" タイプ="hidden" > <input type="button" class="Search_button_select" onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="選択..."> </td> </tr> <tr> <td class="Search_item"> <span class="Edit_mustinput">*</span>引用バージョン:</td> <td class="検索コンテンツ" id="yyfb"> <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> </選択> </td> </tr> <tr> <td class="Search_item">劣化したコンポーネント:</td> <td class="検索コンテンツ" id="thgj"> <select name="thgjDm" style="width:160" id="thgjDm"> <option value="-1" が選択されました>なし</option> </選択> </td> </tr> </表> |
>>: CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)
最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...
目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...
質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...
目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...
端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...
具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...
ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...
.imgbox{ 幅: 1200ピクセル; 高さ: 612px; 右マージン: 自動; 左マージン...
1. MySQL にログインし、SHOW VARIABLES LIKE 'character...
本文は以下から始まります。 123WORDPRESS.COM ダウンロード:純粋な CSS3 で超リ...
コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...
クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...
その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...
login.html 部分: <!DOCTYPE html> <html lang...
最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...