select 下拉框的值然后显示另一个框？

Question

谁能帮帮我。如果我 select 待处理或未完成的作业状态，我想显示原因框。

下拉列表

  <div class="form-group">
   <label for="exampleFormControlSelect2">Job Status</label>
    <select type="text" id="job_status" name="job_status" onchange="myFunction()">
        <option value=''></option>
        <option value="Doing">Doing</option>
        <option value="Pending">Pending</option>
        <option value="Incomplete">Incomplete</option>
        <option value="Completed">Completed</option>
    </select>
  </div>

我希望在选择待定或不完整时出现的原因框

   <div class="form-group row">
      <label for="reason" class="col-sm-2 col-form-label">Reason</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputEmail3">
        </div>
   </div>

剧本

<script>
   function myFunction() {
   var x = document.getElementById("job_status").value;
   document.getElementById("demo").innerHTML = "You selected: " + x;
   }
</script>

谢谢大家

Answer 1

每当您使用简单的 if else 条件 select 这些选项时，您只需要更改输入的 css。

   function myFunction() {
   var x = document.getElementById("job_status").value;
  if(x == 'Pending' || x == 'Incomplete'){
    document.getElementById("reason").style.display = 'block';
                }
   else {
   document.getElementById("reason").style.display = 'none';
    }
   }

#reason {
  display:none;  
}

  <div class="form-group">
   <label for="exampleFormControlSelect2">Job Status</label>
    <select type="text" id="job_status" name="job_status" onchange="myFunction()">
        <option selected disabled>Select Status</option>
        <option value="Doing">Doing</option>
        <option value="Pending">Pending</option>
        <option value="Incomplete">Incomplete</option>
        <option value="Completed">Completed</option>
    </select>
  </div>
  
     <div id="reason" class="form-group row">
      <label for="reason" class="col-sm-2 col-form-label">Reason</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputEmail3">
        </div>
   </div>

select 下拉框的值然后显示另一个框？

select the value on dropdown then display another box?

html

javascript