javascript - 如何仅在从 'select class' 标签中选择选项后才显示输入选项？

Question

我使用以下 html 代码来显示选项:

<select class="form-control input-lg" style="text-align:center">
    <option value="type">-- Select a Type --</option>
    <option value="student">Student</option>
    <option value="company">Company</option>
</select>

现在假设我想仅在选择“学生”选项和基于用户选择的“公司”输入选项的单独列表时，才在 div 标记内显示输入框列表(如下所示)。以下输入框用于学生选项:

<div id="divina">
    <input class="form-control input-lg" name="name" placeholder="Full Name" type="text" >              
    <input class="form-control input-lg" name="usn" placeholder="USN" type="text">
    <select class="form-control input-lg" name="branch">
        <option value="Month">-- Select branch --</option>
        <option value="Month">Computer Science & Engineering</option>
        <option value="Month">Information Science & Engineering</option>
        <option value="Month">Electronics & Communication Engineering</option>
        <option value="Month">Electrical & Electronics Engineering</option>
        <option value="Month">Mechanical Engineering</option>
        <option value="Month">Civil Engineering</option>
        <option value="Month">MBA</option>
        <option value="Month">MCA</option>
    </select>
    <input class="form-control input-lg" name="contact" placeholder="Contact No." type="text">
    <input class="form-control input-lg" name="email" placeholder="E-mail" type="email">
    <input class="form-control input-lg" name="password" placeholder="Password" type="password">
</div>

我在 head 标签中使用以下 JavaScript:

JS:

function show(that){
    if(that.value=="student"){
          document.getElementById("divina").style.display = "block";
    }
    else{
          document.getElementById("divina").style.display = "none";
    }
}

嗯，我已经尝试了很多，但根本不起作用，任何意见或建议将不胜感激!!!

Answer 1

为您的选择提供一个标识符:

<select id="my-list" class="form-control input-lg" style="text-align:center">
    <option value="type">-- Select a Type --</option>
    <option value="student">Student</option>
    <option value="company">Company</option>
</select>

然后将 onchange() 事件附加到其上以切换显示:

$('body').on('change','#my-list', function(){
    if($(this).val()=="student")
        $("#divina").show();
    else
        $("#divina").hide(); 
});

注意:默认情况下，您可以使用内联样式style="display:none"隐藏您的div。

希望这有帮助。

<小时/>

$('body').on('change','#my-list', function(){
    if($(this).val()=="student")
        $("#divina").show();
    else
        $("#divina").hide(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my-list" class="form-control input-lg" style="text-align:center">
  <option value="type">-- Select a Type --</option>
  <option value="student">Student</option>
  <option value="company">Company</option>
</select>
<div id="divina" style="display:none">
  <input class="form-control input-lg" name="name" placeholder="Full Name" type="text" >              
  <input class="form-control input-lg" name="usn" placeholder="USN" type="text">
  <select class="form-control input-lg" name="branch">
    <option value="Month">-- Select branch --</option>
    <option value="Month">Computer Science & Engineering</option>
    <option value="Month">Information Science & Engineering</option>
    <option value="Month">Electronics & Communication Engineering</option>
    <option value="Month">Electrical & Electronics Engineering</option>
    <option value="Month">Mechanical Engineering</option>
    <option value="Month">Civil Engineering</option>
    <option value="Month">MBA</option>
    <option value="Month">MCA</option>
  </select>
  <input class="form-control input-lg" name="contact" placeholder="Contact No." type="text">
  <input class="form-control input-lg" name="email" placeholder="E-mail" type="email">
  <input class="form-control input-lg" name="password" placeholder="Password" type="password">
</div>