ドロップダウンの選択に基づいて<div>を表示または非表示にする

debugcn 投稿 Dev

スコット・プセル

私がやろうとしているのは、選択したものに基づいて、スノーボードのレンタルオプションまたはスキーのレンタルオプションのいずれかをページに表示することです。発生するのは、選択が行われると、スキーオプションが選択されることだけです。

私が持っているコードは以下の通りです

スノーボードまたはスキーのオプションのみを許可する別の方法がある場合は、私に知らせてください。

function sksbcheck(nameSelect)
{
    admOptionValue = document.getElementById("sksb").value;
        if(admOptionValue = "ski"){document.getElementById("ski").style.display = ""; document.getElementById("snb").style.display = "none"; }
    else{
        if(admOptionValue = "snowboard"){document.getElementById("snb").style.display = ""; document.getElementById("ski").style.display = "none"; }
    else{    
        if(admOptionValue = "a"){document.getElementById("snb").style.display = "none"; document.getElementById("ski").style.display = "none"; }
    }}
}

<h5>Renter 1 Package</h5>
                            
                            <div style="margin-right:2%; height:100px; float:left;">
                            <label>Skier/Snowboard</label>        
                            <select name="feet" id="sksb" required="required" onchange="sksbcheck(this);" style="height:35px; padding:5px; float:left; margin-right:5px; width:100px;">
                                            <option value="a">...</option>
                                            <option value="ski">Skis</option>
                                            <option value="snowboard">Snowboard</option>
                                        </select>    
                            </div>
                            
                            <div id="ski" style="margin-left:2%; margin-right:2%; display:none; float:left;">
                            <label>Ski Options</label>        
                            <input type="checkbox" name="vehicle1" value="Skis"> Skis <br>
                            <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
                            <input type="checkbox" name="vehicle2" value="Poles"> Poles <br>
                            <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>    
                            </div>
                            
                            <div id="snb" style="margin-left:2%; margin-right:2%; display:none; float:left;">
                            <label>Snowboard Options</label>        
                            <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br>
                            <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
                            <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>    
                            </div>

Ason

外部CSSと、いくつかのCSSルールを組み合わせたより単純なスクリプトを使用して、この「アップグレード」を提案できますか。

外部CSSを再利用でき、マークアップが非常に読みやすくなるため、外部CSSを使用することは大きな利点です。

また、このスクリプトを使用すると、マークアップとCSSルールを追加するだけでオプションを追加できます。

document.querySelector('.choose-options').addEventListener('change', function(e) {
  e.target.parentElement.setAttribute('data-type', e.target.value);
});

.choose-wrap {
  margin-right:2%; height:100px; float:left;
}
.choose-options {
  height:35px; padding:5px; float:left; margin-right:5px; width:100px;
}
.ski-options, .snb-options {
  display: none;
  margin-left:2%;
  margin-right:2%;
  float:left;
}

div[data-type=ski] ~ .ski-options {
  display: block;
}
div[data-type=snowboard] ~ .snb-options {
  display: block;
}

<h5>Renter 1 Package</h5>

<div class="choose-wrap">
  <label>Skier/Snowboard</label>
  <select name="feet" required="required" class="choose-options">
    <option value="a">...</option>
    <option value="ski">Skis</option>
    <option value="snowboard">Snowboard</option>
  </select>
</div>

<div class="ski-options">
  <label>Ski Options</label>
  <input type="checkbox" name="vehicle1" value="Skis"> Skis <br>
  <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
  <input type="checkbox" name="vehicle2" value="Poles"> Poles <br>
  <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>
</div>

<div class="snb-options">
  <label>Snowboard Options</label>
  <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br>
  <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
  <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>
</div>

したがって、既存のコードと比較して、このコードで何が起こっているのかを手順として明確にするには、次のようにします。

は要素をdocument.querySelector()見つけて、次のように1つのインラインを使用する代わりにselect、onchangeハンドラー（addEventListener）をアタッチします。onchange="sksbcheck();"
ハンドラーの関数パラメーターe（function(e)）は、イベントオブジェクトを保持します。このオブジェクトは、誰かがアイテム（この場合は選択ボックス）を変更したときに関数自体に渡されます。
オブジェクト（）のtargetプロパティは、クリックされた実際の要素への参照を保持します。evente.targetdocument.getElementById("sksb")
e.target.parentElement.setAttribute()その後、属性を追加しdata-type、選択ボックスの親に、wrapどのオプションに基づいてdiv要素は、すなわち、選択されましたdata-type="ski"
次に、CSSルールが開始され、次のように表示されます。divにwrap値 "ski"（data-type="ski"）の属性がある場合、ifステートメントのように、クラスski-options（div[data-type=ski] ~ .ski-options {...}）を使用してdivでブロックするように表示を設定します。
if(admOptionValue = "ski"){document.getElementById("ski").style.display = ""; document.getElementById("snb").style.display = "none"; }

2つのselectグループを表示する更新

グループ選択要素をループして、それぞれにイベントハンドラーを追加する方法は次のとおりです。

Array.prototype.slice.call(document.querySelectorAll('.choose-options')).forEach(function(elem) {
  
  elem.addEventListener('change', function(e) {

    e.target.parentElement.setAttribute('data-type', e.target.value);

  });

});

.wrap {
  clear: both;
}
.choose-wrap {
  margin-right:2%; height:100px; float:left;
}
.choose-options {
  height:35px; padding:5px; float:left; margin-right:5px; width:100px;
}
.ski2-options, .snb2-options,
.ski-options, .snb-options {
  display: none;
  margin-left:2%;
  margin-right:2%;
  float:left;
}

div[data-type=snowboard2] ~ .snb2-options,
div[data-type=ski2] ~ .ski2-options,
div[data-type=snowboard] ~ .snb-options,
div[data-type=ski] ~ .ski-options {
  display: block;
}

<div class="wrap">
  <h5>Renter 1 Package</h5>

  <div class="choose-wrap">
    <label>Skier/Snowboard</label>
    <select name="feet" required="required" class="choose-options">
      <option value="a">...</option>
      <option value="ski">Skis</option>
      <option value="snowboard">Snowboard</option>
    </select>
  </div>

  <div class="ski-options">
    <label>Ski Options</label>
    <input type="checkbox" name="vehicle1" value="Skis"> Skis <br>
    <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
    <input type="checkbox" name="vehicle2" value="Poles"> Poles <br>
    <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>
  </div>

  <div class="snb-options">
    <label>Snowboard Options</label>
    <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br>
    <input type="checkbox" name="vehicle2" value="Boots"> Boots <br>
    <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br>
  </div>
</div>

<div class="wrap">
  <h5>Renter 2 Package</h5>

  <div class="choose-wrap">
    <label>Skier/Snowboard</label>
    <select name="feet" required="required" class="choose-options">
      <option value="a">...</option>
      <option value="ski2">Skis 2</option>
      <option value="snowboard2">Snowboard 2</option>
    </select>
  </div>

  <div class="ski2-options">
    <label>Ski Options</label>
    <input type="checkbox" name="vehicle1" value="Skis"> Skis 2<br>
    <input type="checkbox" name="vehicle2" value="Boots"> Boots 2<br>
    <input type="checkbox" name="vehicle2" value="Poles"> Poles 2<br>
    <input type="checkbox" name="vehicle2" value="Helmet"> Helmet 2<br>
  </div>

  <div class="snb2-options">
    <label>Snowboard Options</label>
    <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard 2<br>
    <input type="checkbox" name="vehicle2" value="Boots"> Boots 2<br>
    <input type="checkbox" name="vehicle2" value="Helmet"> Helmet 2<br>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]