HTML 選択オプションの基本的な理解と使用_HTML/Xhtml_Web ページの作成

JavaScript の HTML (選択オプション) の詳細説明
1. 基本的な理解:

コードをコピーします

コードは次のとおりです:

var e = document.getElementById("selectId");
e. options= new Option("text","value"); 🎜>//オプション オブジェクトを作成します。つまり、1 つ以上の text
//オプションは配列であり、複数の <オプションを格納できます。 タグ value="value">Text このようなタグ

1:options[ ]配列の属性:
長さ属性----- --Length 属性
selectedIndex 属性-------- 現在選択されているボックス内のテキストのインデックス値。このインデックス値はメモリによって自動的に割り当てられます (0、1、2、3...)。 (No. 1 番目のテキスト値、2 番目のテキスト値、3 番目のテキスト値、4 番目のテキスト値...)
2: 単一のオプションの属性 (---obj.options[ obj.selectedIndex] は指定された < ;option> タグ (---)
text 属性----------テキストを返す/指定する
value 属性------< と一致する値を返す/指定する;オプション値="...">。
index 属性 -------添字を返します。
selected 属性 -------オブジェクトが選択されているかどうかを返します。 true または false を指定することで、選択された項目を動的に変更できます。
defaultSelected 属性-----オブジェクトがデフォルトで選択されているかどうかを返します。真/偽。
3: オプション メソッド
タグを追加します-----obj.options.add(new("text","value"));
delete
;option> label-----obj.options.remove(obj.selectedIndex)
ラベルのテキストを取得します-----obj.options[obj.selectedIndex ]。 text
タグの値を変更します-----obj.options[obj.selectedIndex]=new Option("New Text","New Value")すべての タグを削除します-----obj.options.length = 0
タグの値を取得します-----obj.options[obj.selectedIndex].value
注意:
a: 上記のメソッドは、obj.add() など、IE と FF での互換性を考慮して、obj.funciton ではなく、この種のメソッド obj.options.function() のように記述されています。 IE でのみ有効です。
b: obj.option のオプションは大文字にする必要はありませんが、新しい Option のオプションは大文字にする必要があります

2. アプリケーション

コードをコピーしますコードは次のとおりです。

< スクリプト言語="javascript">
関数番号(){
var obj = document.getElementById("mySelect"); new Option("my "My Eat", "4"); //現在選択されている値を変更します
//obj.options.add(new Option("My Eat", "4"));オプションを追加します
//alert(obj.selectedIndex);//シリアル番号を表示します。オプションはそれ自体で設定されます
//obj.options[obj.selectedIndex].text = "My food";値を変更
//obj.remove(obj.selectedIndex);関数を削除


select id=" mySelect">
My バッグ
My オイル 私の負担

1.




コードを動的に作成します。

コードは次のとおりです。

function createSelect(){ var mySelect = document.createElement("select"); = "mySelect"; document.body.appendChild(mySelect);

2. オプションの追加

コードをコピー


コードは次のとおりです:

function addOption(){
//ID、

var obj に基づいてオブジェクトを検索します= document.getElementById('mySelect');

//オプションを追加しますobj.add(new Option("text","value")) //これは IEobj でのみ有効です.options.add(new Option("text","value")); //これは IE および Firefox と互換性があります }

3. すべてのオプションを削除します

コードをコピーします

コードは次のとおりです:

function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;

4.オプション option

コードをコピーコードは次のとおりです。

function RemoveOne( ){
var obj=document.getElementById('mySelect');
//index、削除するオプションのシリアル番号、ここでは現在選択されているオプションのシリアル番号を取得します
varindex= obj.selectedIndex;
obj.options.remove(index);


5. オプション

コードをコピーします

コードは次のとおりです: var obj=document.getElementById('mySelect');

varindex=obj。 selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します

var = obj.options[index].value

6. オプションのテキストを取得します。 >

コードをコピーします

コードは次のとおりです: var obj=document.getElementById(' mySelect'); varindex=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します

var = obj.options[index].text; 🎜>7. オプションを変更します

コードをコピーします

コードは次のとおりです:

var obj=document.getElementById('mySelect'); varindex=obj.selectedIndex; //シリアル番号、現在選択されているオプションを取得しますvar val = obj.options[index]=new Option("新しいテキスト","新しい値");

コードをコピーします


コードは次のとおりです:

function RemoveSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}


<頭>


<スクリプト言語=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1= document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function Choice()
{
varindex=$("area").selectedIndex;
var val=$("エリア").options[index].getAttribute("値")
if(val==10)
{
var i=$("コンテキスト") .childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add( new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104 "))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes。長さ-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add( new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区", "204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context") .childNodes.length-1;
alert(x)
}
function delete()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}

<
change="choice()" で id="エリア" を選択>

これらの西に基づいて、JQEURY AJAX JSON を使用して小さな機能能如下:
JS 代記入:(SELECT 相关的代码)

复制代码代码如下:

/**
* @description Component linkage drop-down list (implemented using JQUERY's AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp this Store the software ID at
* @prarm url The address to jump to
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//Use The get method accesses the backend
dataType: "json",//Returns data in json format
url: url,//The backend address to be accessed
data: "method=" method "&temp=" temp, //Data to be sent
success: function(msg){//msg is the returned data, do data binding here
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data into HTML data format
* @prarm selectId ID of the drop-down list
* @prarm nodeArray Returned JSON array
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var tempSelect=$ j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i//create select Option
tempOption= $j('' nodeArray[i].mc ' 🎜>}
/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The index position to start clearing
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!= index){
//The length is changing because it must be reacquired
length=document.getElementById(selectId).options.length;
for(var i=index;idocument.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description Get the list of degraded components
* @prarm selectId1 Reference the ID of the software drop-down list
* @prarm selectId2 ID of the degraded component drop-down list
*/
function getCpgjThgl (selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Reference software drop-down list
var obj2=document.getElementById(selectId2);//Degenerate component drop-down list
var len= obj1.options.length;
//Return when the length of the referenced software list is equal to 1, no operation is performed
if(len==1){
return false;
}
// Clear the value of the drop-down list, both methods are available
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i< ;len; i ){
var option= obj1.options[i];
//The selected items of the referenced software are not added
if(i!=obj1.selectedIndex){
//Clone OPTION and add to SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}


HTML code:

Copy code

The code is as follows:

< ;/tr>








< /TABLE>

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

9

Java チュートリアル

1627

14

CakePHP チュートリアル

1352

46

Laravel チュートリアル

1265

25

PHP チュートリアル

1210

29

もっと見る

Related knowledge

HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved

*Quoting software:< ;/td>	onClick=" linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
*Quote version:
Degenerate components:	None