未选择选择时隐藏Div标记

时间：2017-03-06 10:54:50

标签： javascript

我的JavaScript代码有问题。由于我不是真正的亲戚，我需要帮助弄清楚为什么我的div没有隐藏。首先，当我点击主要或辅助时，它也可以正常运行，而高级也是如此。如果我点击 Tertiary ，高中下的文本字段高级课程将再次显示。它应该只显示文本字段高等教育课程。现在当我选择高中时，显示应该只是文本字段高级课程。现在发生的是文本字段高级课程和文本字段高等教育课程仍然可见。当它未被选中时，它应该被隐藏。

function showDiv(select) {
  if (select.value == 'Tertiary') {
    if (select.value == 'Tertiary') {
      document.getElementById('hidden_Tertiary').style.display = "block";
    } else {
      document.getElementById('hidden_Tertiary').style.display = "none";
    }
  } else if (select.value == 'Senior High School') {
    if (select.value == 'Senior High School') {
      document.getElementById('hidden_Senior').style.display = "block";
    } else {
      document.getElementById('hidden_Senior').style.display = "none";
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-lg-6 form-group">
  <label class="control-label">Level:</label>
  <select class="form-control" id="test" onchange="showDiv(this)" name="ship_level"><option value="Primary">Primary</option><option value="Secondary">Secondary</option><option value="Senior High School">Senior High School</option><option value="Tertiary">Tertiary</option></select>
</div>
<div id="hidden_Tertiary" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Tertiary Course:</label>
  <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Tertiary" type="text">
</div>
<div id="hidden_Senior" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Senior Course:</label>
  <input class="form-control" placeholder="Enter The Course You asdasdWant" name="ship_course_Senior" type="text">
</div>

5 个答案:

答案 0 :(得分：0)

function showDiv(select){

   if(select.value=='Tertiary'){
    document.getElementById('hidden_Tertiary').style.display = "block";
   } else{
    document.getElementById('hidden_Tertiary').style.display = "none";
   }
 
 
   if(select.value=='Senior High School'){
    document.getElementById('hidden_Senior').style.display = "block";
   } else{
    document.getElementById('hidden_Senior').style.display = "none";
   }

   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-lg-6 form-group">
                    <label class="control-label">
                        Level:
                    </label>
                    <select class="form-control" id="test" onchange="showDiv(this)" name="ship_level"><option value="Primary">Primary</option><option value="Secondary">Secondary</option><option value="Senior High School">Senior High School</option><option value="Tertiary">Tertiary</option></select>
                </div>

<div id="hidden_Tertiary" style="display: none;" class="col-md-6 form-group">
                    <label class="control-label">
                        Tertiary Course:
                    </label>
                    <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Tertiary" type="text">
                </div>
                <div id="hidden_Senior" style="display: none;" class="col-md-6 form-group">
                    <label class="control-label">
                        Senior Course:
                    </label>
                    <input class="form-control" placeholder="Enter The Course You asdasdWant" name="ship_course_Senior" type="text">
                </div>

答案 1 :(得分：0)

您需要在每次更改时隐藏/显示div

＆＃13;
＆＃13; 
function showDiv(select) {
  document.getElementById('hidden_Senior').style.display = "none";
  document.getElementById('hidden_Tertiary').style.display = "none";
  if (select.value == 'Tertiary') {
    if (select.value == 'Tertiary') {
      document.getElementById('hidden_Tertiary').style.display = "block";
    } else {
      document.getElementById('hidden_Tertiary').style.display = "none";
    }
  } else if (select.value == 'Senior High School') {
    if (select.value == 'Senior High School') {
      document.getElementById('hidden_Senior').style.display = "block";
    } else {
      document.getElementById('hidden_Senior').style.display = "none";
    }
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-lg-6 form-group">
  <label class="control-label">Level:</label>
  <select class="form-control" id="test" onchange="showDiv(this)" name="ship_level"><option value="Primary">Primary</option><option value="Secondary">Secondary</option><option value="Senior High School">Senior High School</option><option value="Tertiary">Tertiary</option></select>
</div>

<div id="hidden_Tertiary" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Tertiary Course:</label>
  <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Tertiary" type="text">
</div>
<div id="hidden_Senior" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Senior Course:</label>
  <input class="form-control" placeholder="Enter The Course You asdasdWant" name="ship_course_Senior" type="text">
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的脚本应该是那样的

 <script>
    function showDiv(select) {
        if (select.value == 'Tertiary') {


                document.getElementById('hidden_Tertiary').style.display = "block";              
                document.getElementById('hidden_Senior').style.display = "none";

        } else if (select.value == 'Senior High School') {

                document.getElementById('hidden_Senior').style.display = "block";               
                document.getElementById('hidden_Tertiary').style.display = "none";
            }


    }
</script>

答案 3 :(得分：0)

首先，if语句中的if做同样的事情，你不需要这些。

其次，如果您只需要在每个选项上显示特定内容，那么您可以先关闭所有内容，然后再单独打开每个项目。

function showDiv(select) {
  document.getElementById('hidden_Tertiary').style.display = "none";
  document.getElementById('hidden_Senior').style.display = "none";
  if (select.value == 'Tertiary') {
    document.getElementById('hidden_Tertiary').style.display = "block";
  } else if (select.value == 'Senior High School') {
    document.getElementById('hidden_Senior').style.display = "block";
  }
}
<div class="col-lg-6 form-group">
  <label class="control-label">Level:</label>
  <select class="form-control" id="test" onchange="showDiv(this)" name="ship_level"><option value="Primary">Primary</option><option value="Secondary">Secondary</option><option value="Senior High School">Senior High School</option><option value="Tertiary">Tertiary</option></select>
</div>
<div id="hidden_Tertiary" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Tertiary Course:</label>
  <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Tertiary" type="text">
</div>
<div id="hidden_Senior" style="display: none;" class="col-md-6 form-group">
  <label class="control-label">Senior Course:</label>
  <input class="form-control" placeholder="Enter The Course You asdasdWant" name="ship_course_Senior" type="text">
</div>

然后您可以通过循环来改善这一点：

function showDiv(select) {
  var subs = document.querySelectorAll('.sub-textbox'); // grab all the textbox divs we want by the class
  for( i=0; i < subs.length; i++ ) { // loop through them
    subs[i].style.display = ""; // remove the style so it uses the stylesheet class
  }
  if (select.value == 'Tertiary') {
    document.getElementById('hidden_Tertiary').style.display = "block";
  } else if (select.value == 'Senior High School') {
    document.getElementById('hidden_Senior').style.display = "block";
  }
}
.sub-textbox {
  display: none;
}
<div class="col-lg-6 form-group">
  <label class="control-label">Level:</label>
  <select class="form-control" id="test" onchange="showDiv(this)" name="ship_level"><option value="Primary">Primary</option><option value="Secondary">Secondary</option><option value="Senior High School">Senior High School</option><option value="Tertiary">Tertiary</option></select>
</div>
<div id="hidden_Tertiary" class="col-md-6 form-group sub-textbox">
  <label class="control-label">Tertiary Course:</label>
  <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Tertiary" type="text">
</div>
<div id="hidden_Senior" class="col-md-6 form-group sub-textbox">
  <label class="control-label">Senior Course:</label>
  <input class="form-control" placeholder="Enter The Course You Want" name="ship_course_Senior" type="text">
</div>

答案 4 :(得分：0)

试试这个功能。它会起作用

function showDiv(select) {
    if (select.value == 'Tertiary') {
        document.getElementById('hidden_Tertiary').style.display = "block";
    } else {
        document.getElementById('hidden_Tertiary').style.display = "none";
    }

    if (select.value == 'Senior High School') {
        document.getElementById('hidden_Senior').style.display = "block";
    } else {
        document.getElementById('hidden_Senior').style.display = "none";
    }
}
相关问题
最新问题