Нужна форма, чтобы при загрузке страницы были доступны правильные параметры

Я разрабатываю форму в своем приложении rails. Возникла проблема при использовании функции скрытия / отображения. Сейчас он настроен на отображение соответствующих текстовых полей: onchange. Как сделать так, чтобы соответствующие текстовые поля отображались при загрузке страницы просмотра? Если есть параметр для категории, скажем «Другое», и пользователь загружается в форму. Другие варианты не загружаются вместе с ним. Им придется щелкнуть что-нибудь еще и снова щелкнуть Другое, чтобы текстовые поля загрузились.

application.css

function showMe(e) {
var strdisplay = e.options[e.selectedIndex].value;
var e = document.getElementById("Other");
var x = document.getElementById("Pcba");

if (strdisplay != "Other") {
    e.style.display = "none";
} else {
    e.style.display = "block";
}
if (strdisplay != "PCBA") {
    x.style.display = "none";
} else {
    x.style.display = "block";
}

}

ПОСМОТРЕТЬ

<div class = "form-group">
              <label>Category</label>
              <%= f.select(:category, [["Select...","Select..."],["PCBA","PCBA"], ["Other","Other"]], {}, { :class => 'form-control', :onchange => "showMe(this)", :onload => "showMe(this)", :default => 'Select...'})%>
            </div>
              <div class = "form-group" id = "Other" style = "display: none">
                    <label>Quantity</label>
                    <%= f.number_field :quantity, class: "form-control", placeholder: "Enter Quantity", required: true  %>
              </div>

                <div id = "Pcba" class = "form-group" style = "display: none">
                  <label>Serial Number</label>
                  <%= f.text_field :serial, class: "form-control", placeholder: "Enter Serial", required: true %>
                  <br>
                  <label>Software Revisions</label>
                  <%= f.text_field :serial, class: "form-control", placeholder: "Enter Serial", required: true %>
                </div>

Вы пытались вызвать свою функцию при загрузке страницы?

— 06.06.2018 22:37

да, пробовал, но та же проблема.

— 07.06.2018 19:14

javascript ruby-on-rails html

06.06.2018 22:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я добавил console.info в вашу функцию showMe, чтобы подтвердить, что она не вызывалась при загрузке страницы (если вы не используете консоль для отладки, это очень полезно!). Я не верю, что загрузка на ваш выбор что-то сделала.

Это код, который я создал, чтобы проверить, как исправить вашу проблему:

<html>
  <head>
    <script>
      function showMe(e) {
        console.info('showMe called');
        var strdisplay = e.options[e.selectedIndex].value;
        var e = document.getElementById("Other");
        var x = document.getElementById("Pcba");

        if (strdisplay != "Other") {
          e.style.display = "none";
        } else {
          e.style.display = "block";
        }
        if (strdisplay != "PCBA") {
          x.style.display = "none";
        } else {
          x.style.display = "block";
        }
      }
      window.onload = function() {
        showMe(document.getElementById('category'));
      };
    </script>
  </head>
  <body>
    <div class = "form-group">
      <label>Category</label>
        <select id = "category" onchange = "showMe(this)" onload = "showMe(this)">
          <option>Select...</option>
          <option selected>PCBA</option>
          <option>Other</option>
        </select>
      </div>
      <div class = "form-group" id = "Other" style = "display: none">
        <label>Quantity</label>
        <input id = "quantity" />
      </div>
      <div id = "Pcba" class = "form-group" style = "display: none">
        <label>Serial Number</label>
        <input id = "serial" />
        <br>
        <label>Software Revisions</label>
        <input id = "serial" />
      </div>
    </div>
  </body>
</html>

Я использую window.onload для вызова вашей функции showMe при загрузке страницы. Поскольку ожидается передача вашего элемента select, я использую document.getElementById, чтобы получить элемент и передать его функции showMe. Вы можете сделать и то, и другое с помощью jQuery.

Сообщите мне, если это сработает!

11.06.2018 18:26