用戶在下拉列表中選擇一個選項后的可選單選按鈕和文本框

Question

我想用各種選項創建一個下拉列表。 當我選擇“報紙”選項時，我希望單選按鈕選項出現，以便我選擇報紙標題。 當我選擇“由員工推薦”選項時，我希望顯示一個帶有占位符“員工姓名，ID，工作場所”的文本框。 當我選擇選項“其他”時，我希望沒有占位符的文本框出現。

這是我到目前為止（編輯代碼）的內容：

<script>
function checkvalue(val)
{
    if(val=="newspaper")
       document.getElementById('job1').style.display='block';
    else if(val=="referral")
       document.getElementById('job2').style.display='block';
    else if(val=="others")
       document.getElementById('job3').style.display='block';
    else
       document.getElementById('job').style.display='none'; 
}
</script>

<select name="job" onchange='checkvalue(this.value)'> 
    <option>pick a option</option>  
    <option value="website">Website</option>
    <option value="postfly">Poster/Flyers</option>
    <option value="newspaper">Newspaper</option>
    <option value="referral">Referred by Employee</option>
    <option value="others">Others</option>
</select>

<div id="job1" name="job" style="display:block">
  <label><input type="radio" name="newspaperradio" id="yesid" value="Paper1"> Paper 1 </label>
  <label><input type="radio" name="newspaperradio" id="noid" value="Paper2"> Paper 2 </label>
</div>

<div id="job2" name="job" style="display:block">
<label for="referral">fdr:</label>
<input type="text" name="referral" id="referral" value="" placeholder="employee name, id, workplace" siez="45px"/>
</div>

<div id="job3" name="job" style="display:block">
<label for="others">fd:</label>
<input type="text" name="others" id="others" value="" placeholder="provide more details"/>
</div>

Answer 1

希望這可以幫助。

 function checkvalue(val) { //Hide all jobs var jobs = document.querySelectorAll("#job1, #job2, #job3"); [].forEach.call(jobs, function (job){ job.style.display = 'none'; }) if (val === "newspaper") document.getElementById('job1').style.display = 'block'; else if (val === "referral") document.getElementById('job2').style.display = 'block'; else if (val === "others") document.getElementById('job3').style.display = 'block'; } 

 <select name="job" onchange='checkvalue(this.value)'> <option>pick a option</option> <option value="website">Website</option> <option value="postfly">Poster/Flyers</option> <option value="newspaper">Newspaper</option> <option value="referral">Referred by Employee</option> <option value="others">Others</option> </select> <div id="job1" name="job" style="display:none;"> <label><input type="radio" name="newspaperradio" id="yesid" value="Paper1"> Paper 1 </label> <label><input type="radio" name="newspaperradio" id="noid" value="Paper2"> Paper 2 </label> </div> <div id="job2" name="job" style="display:none;"> <label for="referral">fdr:</label> <input type="text" name="referral" id="referral" value="" placeholder="employee name, id, workplace" siez="45px" /> </div> <div id="job3" name="job" style="display:none;"> <label for="others">fd:</label> <input type="text" name="others" id="others" value="" placeholder="provide more details" /> </div>