36

プレーンな JavaScript を使用したい。ドロップダウンリストがあります（<select>いくつかの<option>sがあります）。特定のオプションを選択すると、非表示の div が表示されます。

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

次に、このバニラ JavaScript コードで試しています。

function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}

問題はオプションの onClick トリガーにあると思いますが、他に何を使用すればよいかわかりません。

4

10 に答える 10

22

の変更イベントを処理し、「はい」かどうかを判断するためselectに使用してみてください。this.value

jsフィドル

JS

document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

HTML

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

<div id="hidden_div" style="display: none;">Hello hidden content</div>
于 2013-04-15T13:10:07.593 に答える
3

<select>個々のオプションではなく、要素の変更イベントにフックする必要があります。

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

// attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
    // of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

デモ

于 2013-04-15T13:17:14.050 に答える
3

より一般的で、呼び出し元の要素から値を渡します (これは保守が容易です)。

  • テキストフィールドに開始条件を指定（表示：なし）
  • 表示/非表示に必要なオプション値を渡します ("Other")
  • 表示/非表示にするターゲットとフィールドを渡します ("TitleOther")

function showHideEle(selectSrc, targetEleId, triggerValue) {	
	if(selectSrc.value==triggerValue) {
		document.getElementById(targetEleId).style.display = "inline-block";
	} else {
		document.getElementById(targetEleId).style.display = "none";
	}
} 
<select id="Title"
   onchange="showHideEle(this, 'TitleOther', 'Other')">
      <option value="">-- Choose</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Other">Other --&gt;</option>						
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title" 
    style="display:none;"/>

于 2018-12-14T15:09:25.723 に答える