Переключить видимость div с помощью JavaScript

Question

Я думаю, что проблема была в том, что я писал .innerHtml и переписывал элементы формы, это правильно, извините, что потратил ваше время

Привет, Я пытаюсь переключить видимость div, содержащего некоторые элементы формы. Идея состоит в том, что если человек выберет конкретное значение поля выбора, обработчик события onchange заставит исчезнуть определенный div, содержащий эти элементы формы. Когда они выберут любую другую опцию, div снова появится.

if (selected_option! = Option_that_makes_id исчезнуть) { document.getElementById (id) .style.visibility = 'hidden'; document.getElementById (id) .innerHTML = 'оператор if работает'; } else if (selected_option == option_that_makes_id исчезает) { document.getElementById (id) .style.visibility = 'visible';

}

Проблема, с которой я столкнулся, заключается в том, что div исчезнет правильно, но затем, когда я выберу другое значение из контрольного списка, div появится снова, но больше не будет содержать значения формы.

Я помещаю .innerHTML в оператор if, а затем, когда это условие выполняется, я просто вижу текст, если оператор if работает, но не элементы формы Это особенность JavaScript или я что-то не так делаю?

Вот полная неотредактированная функция JavaScript

function change_div_visibility(id,select_id,div){//id is the id of the select box and the name of the div which you want to change the visibility of .
 var select_option = document.getElementById(select_id).options;
 var chosen_option = select_option[select_option.selectedIndex].value;
 if(chosen_option != id){
  document.getElementById(div).style.display = 'block';
  document.getElementById(div).innerHTML = 'the if statement is working';
 }else if(chosen_option == id){
  document.getElementById(div).style.display = 'none';
  document.getElementById(div).innerHTML = 'the else statement is working but for some reason the visibility of the div is not changing. ';
 }
}

и раздел формы, которой я пытаюсь манипулировать

<p><label for='buying_options'>Select Buying Option</label><select onchange=\"change_div_visibility('new_buying_1','buying_options1','div1')\" id='buying_options1' name='buying_options1'><option value='undefined'>Select Buying Option</option>
   <option value='new_buying_1'>New Buying Option</option>";
   $y = '';
   foreach($buying_options_arr as $key=>$value){
            $x.= "<option value='$key' >$value</option>";
   $y.= '&lt;option value='.$key.'&gt;'.$value.'&lt;/option&gt;';
   }
        $x.= "</select> or</p> ";
  $x.= "<div id='div1' >
  <p><label for='add_new_buying_option'>Add new Buying Option: </label><input id='add_new_buying_option' type='text' name='add_new_buying_option1' /></p>\n";
  $x.= "<p><label for='compression' >New Unit Quantity: </label><input type='text' id='compression' name='unit_quantity1' /></p>\n
  ";

Спасибо Andrew

Answer 1

Вы пробовали изменить вместо style.display 'none' или 'block'?