Question

自从我纯粹使用html以来已经有一段时间了。我有一个带有一些选项的下拉菜单，根据选择，我想在页面上的特定位置显示一些div。

最初，所有输入div都被隐藏，因为“请做出选择”是下拉菜单中的预选选项。由于div是呈现和隐藏的，因此它们始终附加到DOM。理想情况下，一旦用户从下拉菜单中进行选择，我想在提交按钮的正下方显示一个div及其下拉选项。如果用户选择高度，则显示div_id3，但是div 1和2由于隐藏的css prop而占用空间。有什么方法（使用css和/ html）在我的提交按钮下面立即显示div 3或div 2。请问是否让我感到困惑。

     <select id="selection_id" name="selection_id" class="form-control">
            <option>Please Make A Selection</option>
            <option value="name">Name</option>
            <option value="age">Age</option>
            <option value="height">Height</option>
        </select>

  <div class="container">
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id1" type="text" placeholder="name"  style="display:none;" required></div>
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id2" type="text" placeholder="age"  style="display:none;" required></div>
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id3" type="text" placeholder="height"  style="display:none;" required></div>
  </div>

下拉选项
    提交按钮
      div1
      div2
      div3

Answer 1

The most easy way in pure JS, you just need to add this code onchange="myFunction()" to your select element and the rest will handled by JS function.

<select id="selection_id" name="selection_id" class="form-control" onchange="myFunction()">
            <option>Please Make A Selection</option>
            <option value="name">Name</option>
            <option value="age">Age</option>
            <option value="height">Height</option>
        </select>

<div class="container">
        <div class="col-md-3" id="div1">
          <input class="col-md-12 same_class_name" id="div_id1" 
            type="text" placeholder="name"  style="display:none;" required>
          </div>
        <div class="col-md-3" id="div2">
          <input class="col-md-12 same_class_name" id="div_id2" 
            type="text" placeholder="age"  style="display:none;" required>
        </div>
        <div class="col-md-3" id="div3">
          <input class="col-md-12 same_class_name" id="div_id3" 
            type="text" placeholder="height"  style="display:none;" required>
        </div>
  </div>

<script>
function myFunction() {
  var x = document.getElementById("selection_id").value;
  
  switch(x) {
  case "name":
    document.getElementById("div_id1").style.display = "inline";
    document.getElementById("div_id2").style.display = "none";
    document.getElementById("div_id3").style.display = "none";
    break;
  case "age":
    document.getElementById("div_id1").style.display = "none";
    document.getElementById("div_id2").style.display = "inline";
    document.getElementById("div_id3").style.display = "none";
    break;
  case "height":
    document.getElementById("div_id1").style.display = "none";
    document.getElementById("div_id2").style.display = "none";
    document.getElementById("div_id3").style.display = "inline";
    break;
  default:
    document.getElementById("div_id1").style.display = "none";
    document.getElementById("div_id2").style.display = "none";
    document.getElementById("div_id3").style.display = "none";

	}
}
</script>

[Updated] If you can include jQuery in your web page then the following code give you, same result, I think you probably do the same.

$('#selection_id').on('change', function(){
    var selection = $(this).val();
    $('[id^=div_id]').hide();
    switch(selection) {
      case "name":   $('#div_id1').show(); break;
      case "age":    $('#div_id2').show(); break;
      case "height": $('#div_id3').show(); break;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selection_id" name="selection_id" class="form-control">
    <option>Please Make A Selection</option>
    <option value="name">Name</option>
    <option value="age">Age</option>
    <option value="height">Height</option>
</select>

<div class="container">
    <div class="col-md-3" id="div1"><input class="col-md-12 same_class_name" id="div_id1" type="text" placeholder="name" style="display:none;" required></div>
    <div class="col-md-3" id="div2"><input class="col-md-12 same_class_name" id="div_id2" type="text" placeholder="age"  style="display:none;" required></div>
    <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id3" type="text" placeholder="height"  style="display:none;" required></div>
  </div>

Answer 2

看看这种方法：

$(function() {
    $('#selection_id').on('change', function(){
        var value = $(this).val();
        hideAllInputs();
        if(value === 'name'){
          $('#div_id1').show();
        }else if(value === 'age'){
          $('#div_id2').show();
        }else if(value === 'height'){
          $('#div_id3').show();
        }
        
    });
});

function hideAllInputs(){
  $('#div_id1').hide();
  $('#div_id2').hide();
  $('#div_id3').hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="selection_id" name="selection_id" class="form-control">
            <option>Please Make A Selection</option>
            <option value="name">Name</option>
            <option value="age">Age</option>
            <option value="height">Height</option>
        </select>

  <div class="container">
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id1" type="text" placeholder="name"  style="display:none;" required></div>
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id2" type="text" placeholder="age"  style="display:none;" required></div>
        <div class="col-md-3"><input class="col-md-12 same_class_name" id="div_id3" type="text" placeholder="height"  style="display:none;" required></div>
  </div>

HTML / CSS有条件且在页面上的特定位置呈现div

2 个答案: