Question

我想创建一个包含各种选项的下拉列表。当我选择选项＆＃34; Newspaper＆＃34;时，我想要单选按钮选项供我选择报纸标题。当我选择＆＃34;由员工推荐＆＃34;时，我想要一个文本框，其中包含＆＃34;员工姓名，ID，工作场所＆＃34;出现。当我选择＆＃34;其他＆＃34;选项时，我想要一个没有占位符的文本框。

这是我到目前为止（编辑代码）：

<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

希望这有帮助。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

用户在下拉列表中选择一个选项后，可选单选按钮和文本框

1 个答案: