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标签中显示输入框列表（如下所示），前提是我根据用户选择的内容选择了Student选项和公司输入选项的单独列表。以下输入框用于学生选项：

<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(); });默认隐藏div。

希望这有帮助。

style="display:none"

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

Answer 2

我猜您需要通过执行

来调用show方法onChange选择事件

<select class="form-control input-lg" style="text-align:center" onchange="show(this)">

Answer 3

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

<div id="blk-student" class="info-block">
your student block elements comes here
</div>

<div id="blk-company" class="info-block">
your Company block elements comes here
</div>

你可以通过提供相关的ID来包装divs

这里是JQuery

$(".info-block").hide(); //keeps the info blocks hidden initially
$("#regType").on("change", function() {
   $(".info-block").hide();
   $("#blk-"+$(this).val()).show();
});

如何在从“选择班级”中选择一个选项后才显示输入选项。标签？

3 个答案: