如何從'select class'標籤中選擇一個選項後才顯示輸入選項？

我用下面的HTML代碼顯示選項：如何從'select class'標籤中選擇一個選項後才顯示輸入選項？

<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>

我使用下面的JavaScript頭標記：

JS：

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

嗯，我已經嘗試了很多，但它根本不工作，任何輸入或建議將不勝感激！

來源

2016-03-26 Adhip Rebello

從哪裏調用'show'方法？ – gurvinder372

請確認！你的意思是你有兩個div塊內容，分別爲學生和另一個公司。現在你想在選擇學生時顯示學生塊，選擇公司時顯示公司塊。是這樣嗎？ – ameenulla0007

@ ameenulla0007是的，它是如此 –

我想你需要調用show方法onChange事件的選擇做

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

來源

2016-03-26 10:22:53 gurvinder372

[不要使用'onevent' HTML屬性。]（http://stackoverflow.com/a/35093997/3853934） –

@Gothdo爲什麼不呢？它簡單直接。現在因爲我不知道他的代碼結構，我可以告訴他在哪裏放置addEventListener代碼？ – gurvinder372

可能是一個noob問題，但我剛開始使用HTML和PHP工作，謝謝你的回答:) –

給你選擇的標識符：

<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>

來源

2016-03-26 10:35:16

<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>

您可以通過給相關的IDS

包裹divs這裏去JQuery的

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

來源

2016-03-26 10:57:55 ameenulla0007

如何從'select class'標籤中選擇一個選項後才顯示輸入選項？

回答

相關問題