Блог

У меня есть форма, которую я использую для обновления существующего набора информации в базе данных. Внутри него находится окно выбора, при выборе опции ‘B’ оно показывает скрытый раздел, а при выборе опции ‘A’ оно скроет раздел. Это работает нормально.

Однако, когда я загружаю набор записей из базы данных и в поле выбора устанавливается параметр ‘B’, чтобы показать скрытый div, он не отображается.

Это потому, что я переключаю тег DIV с помощью ‘onchange’.

Как мне заставить JS корректно отображать тег DIV при загрузке набора записей? В настоящее время, чтобы увидеть данные, я должен переключать поле выбора между двумя вариантами.

Я почти ничего не знаю о JS, приведенный ниже JS не мой, я был бы признателен за некоторую помощь.

Спасибо

 <!--- show / hide DIV based on select --->

<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenDiv";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName amp;amp; document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleDiv";
        lastDiv = divName;
    }
}
//-->
</script>
<style type="text/css" media="screen"><!--
.hiddenDiv {
    display: none;
    }
.visibleDiv {
    display: block;
    border: 0px grey solid;
    }

--></style>
<!--- end DIV hide --->



--------------snip----------



  <select name="ad_i" id="ad_i" onchange="showDiv(this.value);">
      <option value="in" <? echo $adtypea; ?> >Option A </option>
      <option value="ba" <? echo $adtypeb; ?> >Option B</option>
   </select>

   <!--- start hiding DIV --->

  <div class="hiddenDiv" id="ba">

  <br /><br />Coding for Ad<br />

<select name="ad_type" id="ad_type">
      <option value="html" <? echo $codestylea; ?> >HTML</option>
      <option value="adsense"<? echo $codestylef; ?>>Adsense / Other JavaScript Code</option>
      <option value="img" default="default" <? echo $codestyleb; ?>>Image</option>
      <option value="swf" <? echo $codestylec; ?>>Flash</option>
   </select>


   </div>
   <!--- end Div for hidden--->
  

После того, как вы отобразили поле выбора и div, которые хотите показать / скрыть, вызовите:

 <script type="text/javascript">
var selectbox = document.getElementById("ad_i");
showDiv(selectbox.options[selectbox.selectedIndex].value);
</script>
  

поэтому я думаю, что это должно идти после

 <!--- end Div for hidden--->
  

 <script type="text/javascript">

    $(document).ready(function(){
    $('#bl_cat').on('change', function() {
      if ( this.value == 'vid')
      //.....................^.......
      {
        $("#dis-vid").show();
        $("#dis-img").hide();  
      }
      else
      {
        $("#dis-img").show();  
        $("#dis-vid").hide();
      }
    });
});
</script>