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

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){ 
 
\t job.style.display = 'none'; 
 
    }) 
 

 
    if (val === "newspaper") 
 
\t document.getElementById('job1').style.display = 'block'; 
 
    else if (val === "referral") 
 
\t document.getElementById('job2').style.display = 'block'; 
 
    else if (val === "others") 
 
\t 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;"> 
 
\t <label><input type="radio" name="newspaperradio" id="yesid" value="Paper1"> Paper 1 </label> 
 
\t <label><input type="radio" name="newspaperradio" id="noid" value="Paper2"> Paper 2 </label> 
 
</div> 
 

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

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