HTMLのselectタグを使用して単一選択と複数選択を実装する方法

今回はHTMLのselectタグで単一選択と複数選択を実装する方法を紹介します HTMLでselectタグで単一選択と複数選択を実装する際の注意点は何ですか？一見。

select 要素は、単一または複数選択のメニューを作成します。フォームが送信されると、ブラウザーは選択された項目を送信するか、カンマで区切られた複数のオプションを収集して 1 つのパラメーター リストに結合し、 フォーム データをサーバーに送信するときに name 属性を含めます。

1. 基本的な使用法:

<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select>

その中で、 タグは省略してページで使用できます

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> 
<OPTION VALUE="0">全部 
<OPTION VALUE="1">湖北电大网络学习中心 
<OPTION VALUE="2">成都师范学院网络学习中心 
<OPTION VALUE="3">武汉职业技术学院网络学习中心 
</SELECT>

2. Select 要素は複数の選択にも使用できます。以下のコードを参照してください。 :

//有multiple属性，则可以多选 
<select name= “education” id=”education” multiple=”multiple”> 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面没有multiple属性 , 只显示一条，不能多选 
<select name= “education” id=”education” > 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 
<select name="education" id="education" size=&#39;3&#39;> 
<option value="0">小学</option> 
<option value="1">初中</option> 
<option value="2">高中</option> 
<option value="3">中专</option> 
<option value="4">大专</option> 
<option value="5">本科</option> 
<option value="6">研究生</option> 
<option value="7">博士</option> 
<option value="8">博士后</option> 
<option selected>请选择</option> 
</select>

3. 複数選択の選択コンポーネントに含まれるすべての一般的な操作:

1. 選択オプションに指定された値を持つ項目があるかどうかを確認します

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function isSelectItemExit(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
var isExit = false; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
} 
return isExit; 
}

2. 選択に項目を追加します。オプション

@param objSelectId 将要加入item的目标select组件的id 
@param objItemText 将要加入的item显示的内容 
@param objItemValue 将要加入的item的值 
function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判断是否该值的item已经在select中存在 
if(isSelectItemExit(objSelectId,objItemValue)) { 
$.messager.alert('提示消息','该值的选项已经存在!','info'); 
} else { 
var varItem = new Option(objItemText,objItemValue); 
objSelect.options.add(varItem); 
} 
} 
}

3. 選択オプションから削除します

選択された項目は複数選択と複数削除をサポートします

@param objSelectId 将要进行删除的目标select组件id 
function removeSelectItemsFromSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
if(objSelect.options[i].selected) { 
objSelect.options.remove(i); 
delNum = delNum + 1; 
i = i - 1; 
} 
} 
if (delNum <= 0 ) { 
$.messager.alert(&#39;提示消息&#39;,&#39;请选择你要删除的选项!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;成功删除了&#39;+delNum+&#39;个选项!&#39;,&#39;info&#39;); 
} 
} 
}

4. 選択オプションから指定された値に従って項目を削除します

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判断是否存在 
if(isSelectItemExit(objSelect,objItemValue)) { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
$.messager.alert(&#39;提示消息&#39;,&#39;成功删除!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;不存在指定值的选项!&#39;,&#39;info&#39;); 
} 
} 
}

5. select

@param objSelectId 将要进行清空的目标select组件id 
function clearSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;) { 
objSelect.options.remove(i); 
} 
} 
}

で項目を取得し、すべての値をカンマで区切って
文字列

に組み立てます

@param objSelectId 目标select组件id 
@return select中所有item的值，值与值之间用逗号隔开 
function getAllItemValuesByString(objSelectId) { 
var selectItemsValuesStr = ""; 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
var length = objSelect.options.length 
for(var i = 0; i < length; i = i + 1) { 
if (0 == i) { 
selectItemsValuesStr = objSelect.options[i].value; 
} else { 
selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; 
} 
} 
} 
return selectItemsValuesStr; 
}

7. 1つの選択で選択されたすべてのオプションを別の選択に移動します。 select

@param fromObjSelectId 移动item的原select组件id 
@param toObjectSelectId 移动item将要进入的目标select组件id 
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
var objSelect = document.getElementById(fromObjSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
if(objSelect.options[i].selected) { 
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 
objSelect.options.remove(i); 
i = i - 1; 
} 
} 
} 
}

8. ある選択内のすべてのオプションを別の選択に移動します

@param fromObjSelectId 移动item的原select组件id 
@param toObjectSelectId 移动item将要进入的目标select组件id 
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
var objSelect = document.getElementById(fromObjSelectId); 
if (null != objSelect) { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 
objSelect.options.remove(i); 
i = i - 1; 
} 
} 
}

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 ！

関連書籍:

CSS を使用して TD の INPUT の幅を設定する方法

デバイス画面の CSS 属性を制御するためにメタ タグにビューポートを実装する方法

方法HTML テーブルの幅が広い場合のオーバーフローを設定する

html スタイルを使用して属性を追加する方法の例

html 新しいウィンドウを開くときにハイパーリンクの属性を制御する方法

以上がHTMLのselectタグを使用して単一選択と複数選択を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

html select 成し遂げる

ソース：php.cn

前の記事：HTML入力ドロップダウンメニューを実装する方法 次の記事：テキストエリアラベルのサイズが不変でマウスドラッグでドラッグできない問題の解決方法

このウェブサイトの声明

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

著者別の最新記事

• 最新の PHP Programmer Toolbox v1.0 バージョンの紹介
  2018-06-11 11:57:34
• vue.js ルーティングの失敗に対処する方法
  2018-06-15 15:55:18
• js を使用してデータベースを解析する方法 (コード付き)
  2018-06-15 15:49:00
• js を使用してプロジェクト内の DOM イベントをバインドする方法
  2018-06-15 15:46:15
• JS文字列と特殊文字の操作方法
  2018-06-15 15:42:38
• プロジェクト内の jQuery 内で各メソッドを使用する方法
  2018-06-15 15:40:34
• jqueryを使用してファイルをアップロードする方法
  2018-06-15 15:39:32
• JSプロトタイプとプロトタイプチェーンの使い方
  2018-06-15 15:37:14
• Angular CLI+Angular 5 の実践的なプロジェクトのデモンストレーション
  2018-06-15 15:34:21
• jQueryを使用してノード要素を置き換えます（コードは添付されています）
  2018-06-15 15:22:51

最新の問題

SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...

から 2024-04-06 19:48:53

0

1

449

SQL groupbyが機能しないので、code_branchでグループ化したい ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameascomp...

から 2024-04-06 19:24:49

0

2

488

search.maven.org からパッケージの最新バージョンを取得しようとしたときにエラーが発生しました search.maven.org から最新のバージョン番号を取得中に「エラー: Maven リポジトリからデータを取得できません」というメッセージが表示される。次の php コード...

から 2024-04-05 12:11:23

0

1

1471

オプションを表示するときに matSelect スタイルを変更する オプションがオンのときに mat-select のプロパティを変更するにはどうすればよいですか? <mat-selectclass="selector"&...

から 2024-04-05 09:23:19

0

1

1374

ネストされたエコーを持つ div 内のエコー echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*FROM`videos`"...

から 2024-04-04 11:09:23

0

1

390

関連トピック

詳細>

• html著作権記号
• HTMLオンラインエディター
• HTMLウェブページ制作
• HTMLスペース
• htmlとは何ですか
• HTMLのフォントサイズを設定する方法
• htmlからテキストへ
• HTMLテキストボックスのコードの書き方

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1424388
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4270692
• 
  JAVA 初心者向けビデオチュートリアル

  2548745
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  508022
• 
  PHP ゼロベースの入門チュートリアル

  863693

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1424388 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2548745 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  508022 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215964 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  892411 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  7665 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  6135 回の学習
• 
  Go言語実践GraphQL

  5069 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  706 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  25762 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

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

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

© php.cn All rights reserved