オプションユーザーがドロップダウンリストでオプションを選択した後のラジオボタンとテキストボックス

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>