ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

機能要件:

1. div をクリックすると、div にフォーカス状態が表示され、同時にドロップダウン ボックスの内容が表示されます。
2. 子供の人数を選択した後、子供の数が 0 より大きい場合は、対応する子供の年齢の選択ボックスが下に表示されます。
3. 大人の数の選択範囲は1〜7、子供の数の選択範囲は0〜4、子供の年齢の選択範囲は1未満、1〜17です。
4. 確認ボタンをクリックすると、選択した大人と子供の数が上部の div に表示されます。
5. 選択ボックスがクリック可能かどうかを制御できます。
6. ul リストが表示されたら、別の ul リストをクリックして前の ul リストを非表示にします。
7. 非表示ボックスをクリックすると、バインドされたイベント要素を除く表示されている ul リストが非表示になります。
8. ページ上の空白の位置をクリックすると、ドロップダウン ボックスの内容全体が非表示になります。

ドロップダウン ボックスが操作できない場合の表示ステータス:

ドロップダウンボックスが操作可能な場合:

お子様の人数を選択すると、対応するお子様の年齢選択ボックスが下に表示されます。

確認ボタンをクリックすると、上の div に結果が表示されます。

当初のアイデアは、それぞれ選択、ul ドロップダウン リスト、btn ボタンのイベントを監視することでした。さらに、ドロップダウン ボックスの他の位置がクリックされると、ul ドロップダウン リストが非表示になり、body がクリックされると、ドロップダウン ボックスの内容全体が非表示になります。監視イベントが多すぎると、イベント バブリングによってイベントの実行にも影響が及び、一部のイベントが複数回実行されることになります。

子供の年齢の選択ボックスは、子供の数に基づいて生成されます。年齢選択ボックスは、子供の数と同じ数だけあります。この場合、年齢選択ボックスは動的に作成する必要があり、年齢選択のイベントをリッスンすることはできません。イベント委任のみを使用できます。したがって、選択、ul ドロップダウン リスト、btn ボタンのクリック イベント、およびコンテナー内の他の位置がクリックされると、ul ドロップダウン リストは非表示になります。すべて dropDownContainer 要素に委任されます。

以下のコードを添付してください

HTML構造コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>選択</title>
</head>
<本文>
  <スクリプトタイプ="モジュール">
    './js/Main.js' から Main をインポートします。
    // パラメータが false の場合、選択ボックスはクリックできません。true の場合、選択ボックスを使用できます。let main=new Main(true);
    main.appendTo("本文");
  </スクリプト>
</本文>
</html>

Main.js ファイル:

'./Utils.js' から Utils をインポートします。
デフォルトクラスMainをエクスポートする{
  静的スタイル=false;
  リスト準備;
  コンストラクタ(状態){
    //state はドロップダウン ボックスがクリック可能かどうかを制御します。this.state=state;
    this.elem = this.createE();
  }
  作成E(){
    if(this.elem) は this.elem を返します。
    div = Utils.createE("div"); とします。
    div.className="ゲスト数";
    div.innerHTML=`<span>人数は未定です</span><i></i>
    <div class="dropDownContainer なし" id="dropDownContainer">
      <div class="dropDownItem クリアフィックス">
        <span>各</span>
        <div class="dropDownSelect">
          <div class="dropDownCont"><span id="adultNum">大人 2 名</span><i></i></div>
          <ul class="dropDownList" tag="大人">${this.setDropDownList("大人")}</ul>
        </div>
        <div class="dropDownSelect">
          <div class="dropDownCont"><span id="childrenNum">0 人の子</span><i></i></div>
          <ul class="dropDownList" tag="children"><li>0</li>${this.setDropDownList("children")}</ul>
        </div>
      </div>
      <div class="dropDownItem clearfix none" id="ItemAge"></div>
      <div class="dropDownBottom clearfix">
        ${this.state?'':'<em class="dropDownTips">リアルタイムの価格を確認できるように、まず日付を選択してください。 </em>'}
        ${this.state?'<a class="dropDownBtn" id="dropDownBtn" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >確認</a>':'<a class="dropDownBtn disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >確認</a>'}
      </div>
    </div>`;
    // スタイルを設定します。スタイルは一度設定するだけでインスタンス化する必要がないため、静的メソッド Main.setStyles() が使用されます。
    //要素を取得します Utils.getIdElem(div,this);
    //div のクリック イベントをリッスンします div.addEventListener("click",(e)=>this.guestsNumClickHandler(e));
    //状態が true の場合、ドロップダウン ボックスはクリック イベントをリッスンします。if(this.state) this.dropDownContainer.addEventListener("click",e=>this.dropDownContainerClick(e));
    //ドキュメントはクリック イベントをリッスンし、ドロップダウン ボックスを非表示にします。document.addEventListener("click",e=>this.documentClick(e));
    div を返します。
  }
  親に追加{
    Utils.appendTo(this.elem,parent);
  }
  guestNumClickHandler(e){
    //ドロップダウン ボックスが表示状態の場合、繰り返し操作を回避するために直接ジャンプします if(!Utils.hasClass(this.dropDownContainer,"none")) return;
    // guestsNum がクリックされていない場合は、イベントのバブルを避けるために直接ジャンプします if(e.target.nodeName!=="SPAN"&&e.target.nodeName!=="I"&&!Utils.hasClass(e.target,"guestsNum")) return;
    //div にフォーカス スタイルを追加します Utils.addClass(this.elem,"focus");
    //dropDownContainer を表示します Utils.removeClass(this.dropDownContainer,"none");
  }
  dropDownContainerClick(e){
    if(e.target.nodeName==="LI"){
      // ul をクリックしてリストを選択します this.dropDownListClick(e);
    }
    そうでない場合(e.target.id==="dropDownBtn"){
      //確認ボタンをクリックします this.dropDownBtnClick();
    }
    そうでない場合(e.target.nodeName==="SPAN" || e.target.nodeName==="I") {
      //span または i タグをクリックすると、その親要素 div がパラメーターとして取得されます this.dropDownSelectClick(e.target.parentElement);
    }
    そうでない場合は(Utils.hasClass(e.target,"dropDownCont")){
      //div 選択ボックスをクリックするときに、div をパラメーターとして使用します。this.dropDownSelectClick(e.target);
    }
    それ以外 {
      //ドロップダウン ボックスの他の位置をクリックすると、現在の ul リストが非表示になります if(this.listPrep) this.listPrep.style.display="none";
    }
  }
  dropDownSelectClick(div){
    //最後に表示された ul リストを非表示にします if(this.listPrep) this.listPrep.style.display="none";
    //現在クリックされているulリストがthis.listPrepに割り当てられます
    this.listPrep = div.nextElementSibling;
    //現在クリックされている ul リストを表示します。this.listPrep.style.display="block";
  }
  dropDownListClick(e){
    //現在クリックされている ul のタグ属性値を取得します。let tag=this.listPrep.getAttribute("tag");
    ユニットを「」にします。
    スイッチ (タグ){
      case "大人": unit="大人";break;
      「子供」の場合: 
        ユニット="子供";
        txt=Number(e.target.innerText); とします。
        //li の値に応じて、以下の年齢選択ボックスを自動的に作成します。this.setDropDownItemAge(txt);
        壊す;
      case "age": unit="歳";break;
    }
    // 選択したリストの値を表示します。 this.listPrep.previousElementSibling.firstElementChild.textContent=e.target.innerText+" "+unit;
    //表示が完了したら、現在表示されている ul を非表示にします。this.listPrep.style.display="none";
  }
  ドロップダウンアイテムの年齢を設定する(txt){
    let str="<span>お子様の年齢</span>";
    txt===0の場合{
      // 0 の場合、年齢選択ボックスは表示されません this.ItemAge.style.display="none";
    }それ以外{
      this.ItemAge.style.display="ブロック";
      //選択された値をループし、年齢選択ボックスを作成します for(let i=0;i<txt;i++){
        str+=`<div class="dropDownSelect">
        <div class="dropDownCont"><span><1 歳</span><i></i></div>
        <ul class="dropDownList" tag="年齢"><li><1</li>${this.setDropDownList("年齢")}</ul>
      </div>`;
      }
      this.ItemAge.innerHTML=str;
    }
  }
  dropDownBtnClick(){
    // 選択したコンテンツを上部の選択ボックスに表示します。let resultStr=this.adultNum.innerText.replace(/\s/g,"")+" "+this.childrenNum.innerText.replace(/\s/g,"");
    this.elem.firstElementChild.textContent=結果Str;
    //ドロップダウンコンテナを非表示
    this.dropDownContainerHide();
  }
  ドキュメントクリック(e){
    //イベントのバブルを回避if(e.target!==document.documentElement && e.target!==document.body) return;
    //ドロップダウンコンテナを非表示
    this.dropDownContainerHide();
  }
  ドロップダウンコンテナ非表示(){
    //div は集約状態を削除します Utils.removeClass(this.elem,"focus");
    //dropDownContainer は Utils.addClass(this.dropDownContainer,"none"); を非表示にします。
    //現在表示されている ul リストを非表示にします if(this.listPrep) this.listPrep.style.display="none";
  }
  setDropDownList(タイプ){
    //ul ドロップダウン リスト コンテンツを作成します。let li="";
    max=0 とします。
    スイッチ(タイプ){
      case "大人": max=8;break;
      case "children": max=5;break;
      ケース "age": max=18;break;
    }
    for(let i=1;i<max;i++){
      li+="<li>"+i+"</li>";
    }
    li を返します。
  }
  静的setStyles(){
    Main.styles を返します。
    main.style を true に設定します。
    Utils.insertCss(".guestsNum",{
      幅:"108px",
      高さ:"34px",
      パディング:"0px 12px",
      境界線:"1px 実線 #ccc",
      境界線の半径:"3px",
      位置:"相対",
      フォントサイズ:"14px",
      色:"#666",
      ユーザー選択:"なし",
    })
    Utils.insertCss(".guestsNum.focus",{
      境界線の色:"#ffa800",
      ボックスシャドウ:"0 0 4px #ffa800"
    })
    Utils.insertCss(".guestsNum>span",{
      行の高さ:"34px"
    })
    Utils.insertCss(".guestsNum>i",{
      表示:"インラインブロック",
      幅:"16px",
      高さ:"16px",
      背景画像:"url(./image/user.jpg)",
      フロート:"右",
      余白:"8px 0px 0px 10px"
    })
    Utils.insertCss(".dropDownContainer",{
      境界線: "1px 実線 #ffa800",
      境界半径: "4px",
      ボックスシャドウ: "0 0 4px #ffa800",
      背景色: "#fff",
      パディング: "20px 15px",
      幅: "480px",
      フォントサイズ:"12px",
      位置:"絶対",
      左:"0px",
      上:"35px",
    })
    Utils.insertCss(".dropDownItem",{
      マージン下:"12px"
    })
    Utils.insertCss(".dropDownItem>span",{
      表示:"ブロック",
      幅:"60ピクセル",
      行の高さ:"28px",
      フロート:"左",
    })
    Utils.insertCss(".dropDownSelect",{
      幅:"90ピクセル",
      高さ:"30px",
      右余白:"10px",
      フロート:"左",
      位置:"相対"
    })
    Utils.insertCss(".dropDownCont",{
      境界線:"1px 実線 #ccc",
      境界線の半径:"3px",
      高さ:"12px",
      パディング:"6px 8px 10px",
    })
    Utils.insertCss(".dropDownCont>span",{
      表示:"インラインブロック",
      幅:"53px",
      高さ:"14px",
      行の高さ:"14px",
      borderRight:"1px 実線 #ccc"
    })
    Utils.insertCss(".dropDownCont>i",{
      表示:"インラインブロック",
      幅:"0px",
      高さ:"0px",
      境界線:"5px 実線 #c6c6c6",
      borderColor:"#c6c6c6 透明 透明",
      マージン: "6px 0px 0px 4px",
      フロート: "右"
    })
    Utils.insertCss(".dropDownList",{
      リストスタイル:"なし",
      パディング:"0px",
      マージン:"0px",
      幅:"88px",
      最大高さ:"200px",
      オーバーフロー:"自動",
      カーソル:"ポインタ",
      境界線:"1px 実線 #ccc",
      背景色:"#fff",
      境界線の半径:"4px",
      位置:"絶対",
      左:"0px",
      上:"30px",
      zインデックス:"2",
      ボックスシャドウ: "1px 1px 3px rgba(0,0,0,.1)",
      表示:"なし"
    })
    Utils.insertCss(".dropDownList>li",{
      行の高さ:"28px",
      パディング左:"8px",
    })
    Utils.insertCss(".dropDownList>li:hover",{
      背景:"#f4f4f4"
    })
    Utils.insertCss(".dropDownBottom",{
      borderTop:"1px 実線 #ccc",
      marginTop:"20px",
      パディング上部:"20px"
    })
    Utils.insertCss(".dropDownTips",{
      フォントスタイル:"通常",
      フォントサイズ: "12px",
      色: "#ef523d",
      行の高さ:"28px"
    })
    Utils.insertCss(".dropDownBtn",{
      テキストデコレーション:"なし",
      フロート: "右",
      表示: "インラインブロック",
      パディング: "2px 22px",
      背景色: "#ffb200",
      境界半径: "4px",
      フォントサイズ: "14px",
      行の高さ: "24px",
      色: "#fff",
    })
    Utils.insertCss(".dropDownBtn.disabled",{
      背景色: "#efefef",
      色: "#999"
    })
    Utils.insertCss(".clearfix:after",{
      コンテンツ:"\"。\""、
      表示:"ブロック",
      オーバーフロー:"非表示",
      可視性:"非表示",
      クリア:"両方",
      高さ:"0px"
    })
    Utils.insertCss(".none",{
      表示:"なし"
    })
  }
}

Utils.js ファイル:

デフォルトクラス Utils をエクスポートする{
  静的createE(要素、スタイル、準備){
    要素 = document.createElement(要素);
    if(style) for(let prop in style) elem.style[prop]=style[prop];
    if(prep) for(let prop in prep) elem[prop]=prep[prop];
    要素を返します。
  }
  静的appendTo(要素、親){
    parent.constructor === String の場合、parent = document.querySelector(parent);
    親要素に子要素を追加します。
  }
  静的ランダム数(最小値,最大値){
    Math.floor(Math.random*(max-min)+min) を返します。
  }
  静的ランダムカラー(アルファ){
    アルファ=アルファ||Math.random().toFixed(1);
    isNaN(alpha)の場合、alpha=1;
    アルファ>1の場合、アルファ=1;
    アルファ<0の場合、アルファ=0;
    col="rgba("; とします。
    (i=0;i<3;i++) の場合{
      col+=Utils.randomNum(0,256)+",";
    }
    col+=alpha+")";
    列を返します。
  }
  静的挿入Css(選択、スタイル){
    document.styleSheets.length===0の場合{
      styleS = Utils.createE("style"); とします。
      Utils.appendTo(styleS,document.head);
    }
    styleSheet を document.styleSheets[document.styleSheets.length-1] とします。
    str=select+"{"とします。
    for(var prop in スタイル){
      str+=prop.replace(/[AZ]/g,function(item){
        "-"+item.toLocaleLowerCase() を返します。
      })+":"+styles[prop]+";";
    }
    str+="}"
    styleSheet.insertRule(str、styleSheet.cssRules.length);
  }
  静的 getIdElem(要素,obj){
    if(elem.id) obj[elem.id]=elem;
    if(elem.children.length===0) の場合、obj を返します。
    for(let i=0;i<elem.children.length;i++){
      Utils.getIdElem(elem.children[i],obj);
    }
  }
  静的addClass(要素、クラス名){
    arr=(elem.className+" "+className).match(/\S+/g);とします。
    arr = arr.filter((item,index)=>arr.indexOf(item,index+1)<0)
    elem.className=arr.join(" ");
  }
  静的removeClass(要素、クラス名){
    if(!elem.className) 戻り値:
    arr = elem.className.match(/\S+/g); とします。
    arr1=className.match(/\S+/g);とします。
    arr1.forEach(item=>{
      arr = arr.filter(t=>t!==item)
    })
    elem.className=arr.join(" ");
  }
  静的hasClass(要素、クラス名){
    if(!elem.className) は false を返します。
    arr = elem.className.match(/\S+/g); とします。
    arr1=className.match(/\S+/g);とします。
    解決しましょう;
    arr1.forEach(item=>{
      res = arr.some(it=>it===item)
    })
    res を返します。
  }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuejs はドロップダウンボックスメニュー選択を実装します
  • ドロップダウンボックスの選択を実装する js
  • JavaScript は日付の 3 レベル リンク ドロップダウン ボックス選択メニューを実装します
  • jsは入力と選択可能なドロップダウンボックスを実装します
  • JavaScriptはドロップダウンボックスをクリックしてページに直接ジャンプする方法を実装します
  • jsはドロップダウンボックスに表示される画像を選択するメソッドを実装します

<<:  Navicat がリモートで SQL Server に接続し、MySQL に変換する詳細な手順

>>:  Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

推薦する

背景画像のみを180度回転させるCSS3実装例

1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題につ...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

XHTML 入門チュートリアル: XHTML タグ

XHTML タグの紹介<br />おそらく、前のセクションで、XHTML ファイルと通常...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...

Dockerはブリッジを追加し、IPアドレスの範囲を設定します

バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...

Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...

クールなIoT大画面機能を実現するHTML+VUEページング

効果デモ.html <html> <ヘッド> <メタ文字セット=&qu...

MySQL における exists、in、any の基本的な使い方

【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...

nginx でネストされた if メソッドを実装する方法

Nginx はネストされた if ステートメントをサポートしておらず、if ステートメントでの論理判...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...