Question

如果用户在select语句中选择了医生值，我试图显示FILE DIV。我知道if语句可以正常工作，因为我也可以在控制台中正常打印该值。我在其他网页中以完全相同的方式切换了div，因此我尤其不了解该网页的最新情况。

function viewFile(){
        var file = document.getElementById("doclicense");
        var type = document.getElementById('accountType').value;
        if(type === 'doctor') {
            file.style.display = "block";
            console.log(type);
        } 
    }

.hidden{
display : none;
}

<div> 
<select id="accountType" name="type" class="form-control" onchange="viewFile()"> 
<option required>Account Type</option>
                        <option value="doctor" name="doctor" id="doctor">Doctor</option>
                        <option value="regular" name="regular" id="reg">Regular Account</option>
                    </select>
</div>

                <div class="hidden file" id="doclicense">
                    <input type="file" name="license"  />
                    <input type="submit"/>
                </div>

**************************************** EDIT-WORKAROUND **** ******************

由于我的代码无法正常工作，因此我添加了一行代码，标题为“ head”，而不是实际值。感谢所有贡献者。我完全删除了隐藏的类，但是当我添加它时，它仍然无法正常工作。

 function viewDocFile() {
        var file = document.getElementById("doclicense");
        var type = document.getElementById('accountType').value;
        if (type === 'regular' || type === 'head') {
            file.style.display = "none"; 
            console.log(type);
        } else { 
            file.style.display = "block";
            console.log(type);
            }
        }

****************************最终编辑***************** ******* 保留原始代码，但添加了CSS内联。

<div class="form-group col-md-6" id="doclicense" style="display:none;">

现在完美运行。

Answer 1

以下是该代码的编写示例（即使仍有恐怖）

// declare them here and not in a function where they will be redone each time the function is called

const
  file_IHM  = document.querySelector('#doclicense')
  ,
  type_IHM  = document.querySelector('#accountType')  // and not with .value ...!
;


type_IHM.onchange = function()
{
  file_IHM.style.display = (this.value==='doctor')?"block":"none"; 

  console.log('type_IHM.value',  this.value );

}

#doclicense { display : none; }

<div>
  <select id="accountType" name="type" class="form-control" >  <!--  let the js in the js part -->
    <option required>Account Type</option>
    <option value="doctor"  id="doctor"  >Doctor</option>
    <option value="regular" id="regular" >Regular Account</option>
  </select>
</div>

<div class="file-class" id="doclicense">  <!--  do not use class="hidden... -->
  <input type="file" name="license" />
  <input type="submit" />   <!-- there is no form anywhere...   why don't you use <button> ?? -->
</div>

Answer 2

如果您的代码真正是什么样子，您是否在<script></script>标签中添加了js？还是要切换div的隐藏和显示？如果是这样，这个答案可能会帮助

<select id="accountType" name="type" class="form-control" onchange="viewFile()"><option required>Account Type</option>
                        <option value="doctor" name="doctor" id="doctor">Doctor</option>
                        <option value="regular" name="regular" id="reg">Regular Account</option>
     </select>
                </div>

                <div class="hidden file" id="doclicense">
                    <input type="file" name="license"  />
                    <input type="submit"/>
                </div>
<script>
function viewFile(){
        var file = document.getElementById("doclicense");
        var type = document.getElementById('accountType').value;
        if(type === 'doctor') {
            file.style.display = "block";
            console.log(type);
        }else{
             file.style.display = "none";
            console.log(type);
        }
    }
</script>

显示Div无法使用Java选择进行工作

2 个答案: