HTML 選択オプションの基本的な理解と使用_HTML/Xhtml_Web ページの作成-htmlチュートリアル-php.cn

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

コードをコピーします

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

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

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("新しいテキスト","新しい値");

コードをコピーします

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

<
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('

Copy code

The code is as follows:

< ;/tr>

< /TABLE>

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