ホームページ >ウェブフロントエンド >jsチュートリアル >select タグに基づいてデフォルトの選択されたオプションを設定するにはどうすればよいですか?

select タグに基づいてデフォルトの選択されたオプションを設定するにはどうすればよいですか?

亚连
亚连オリジナル
2018-06-02 09:54:401944ブラウズ

以下に、select タグのデフォルトの選択済みオプションを設定する方法に関する記事を共有します。これは優れた参考値であり、皆様のお役に立てれば幸いです。

方法は2つあります。

タイプ1221f08282418e2996498697df914ce4eの属性で選択した項目を設定するメソッドです。phpなどの動的言語において、必要に応じて出力結果をバックグラウンドで制御することができます。

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

2 番目の は、フロントエンド js を通じて選択された項目を制御することです:

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

221f08282418e2996498697df914ce4e ラベルの選択された項目のテキストを取得するための JS コードは:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( &#39;sel&#39; ).options[document.getElementById( &#39;sel&#39; ).selectedIndex].value;

221f08282418e2996498697df914ce4e タグを操作するためのその他のヒントは次のとおりです:

1) select を動的に作成します

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

2) オプション option を追加します

function addOption(){
//根据id查找对象,
var obj=document.getElementById( &#39;mySelect&#39; );
//添加一个选项
obj.add( new Option( "文本" , "值" ));
}

3 ) すべてのオプションを削除option

function removeAll(){
var obj=document.getElementById( &#39;mySelect&#39; );
obj.options.length=0;
}

4) オプションを1つ削除option

function removeOne(){
var obj=document.getElementById( &#39;mySelect&#39; );
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5) オプションの値を取得option

りー

6) オプションoptionの取得

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

7) オプションoptionの変更

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

8) 削除select

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]= new Option( "新文本" , "新值" );

上記は私が皆さんのためにまとめたので、将来的に皆さんのお役に立つことを願っています。

関連記事:

axios を介して post リクエストを送信し、springMVC がパラメータを受信できないことが判明する (詳細なチュートリアル)

vue を介して axios コンポーネントを追加して、post の null パラメータの問題を解決する (詳細なチュートリアル)

vue の axios を介したポストリクエストパラメータの処理 (詳細なチュートリアル)

以上がselect タグに基づいてデフォルトの選択されたオプションを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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