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 までご連絡ください。

前の記事：HTML選択タグにリンクを追加する3つの方法_HTML/Xhtml_Webページ制作次の記事：HTML選択タグにリンクを追加する3つの方法_HTML/Xhtml_Webページ制作

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

福祉オンライン 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