Скрытие ссылки на основе выбранного значения в раскрывающемся списке - PullRequest
Новая
       26

Скрытие ссылки на основе выбранного значения в раскрывающемся списке

0 голосов
/ 12 октября 2011

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

Раскрывающийся список - это выбор языка.Поэтому, когда я выбираю «английский», я хочу, чтобы ссылка была скрытой, но при выборе французского ссылка должна оставаться.

Можете ли вы показать, как я могу это сделать?Я хочу выучить это.Спасибо

Ответы [ 2 ]

1 голос
/ 12 октября 2011

Как насчет этого: 

function handleLang() {
    if ($('#select').val() == 'en') {
        $('#link').hide();
    } else {
        $('#link').show();
    }
}
$(function() {
    // hide/show on load
    handleLang();

    // hide/show when the language is changed (useful if the page doesn't reload)
    $('#select').change(handleLang);
});
0 голосов
/ 21 февраля 2016

На основании первого ответа на этот вопрос и дополнительных подсказок, предоставленных автором первого ответа в комментариях, вот окончательная (и компактная) полная версия кода, который работал для меня (я также удалил и применил стилизацию так как больше не требовалось). Это главная страница, предоставленная в index.html.erb для этого тестового приложения. 

<h2 id='main_header'>Showing/hiding link based on dropdown selection</h2>

<table>
  <thead>
    <th>Action</th>
    <th>Skip assessment</th>
    <th>Reason for skipping</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <%= link_to 'Start asseement', url_for(controller: :home, action: :start_assessment), id: 'start_assessment' %>
      </td>
      <td>
        <%= select_tag "skip_option", options_for_select([ "Yes", "No" ], "No"), id: "skip_option", onchange: "reason_picker()" %>
      </td>
      <td>
        <%= text_field_tag "reason_for_skipping", nil, size: 50, placeholder: 'Enter reason here...' %>
      </td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  $(document).ready (
    window.reason_picker = function () {
      var selected = document.getElementById("skip_option").selectedIndex;
      if (selected == 0) {
        $("#reason_for_skipping").show();
        $("#start_assessment").hide();
      }
      else {
        $("#reason_for_skipping").hide();
        $("#start_assessment").show();
      }
    }
  );
</script>

Начальная страница оценки очень проста, это просто заголовок и обратная ссылка на главную страницу в файле start_assessment.html.erb: 

<h1>Assessment</h1>

<%= link_to 'Back', :back %>

Мне это поможет, вот файл контроллера home_controller.rb: 

class HomeController < ApplicationController
  def index
  end

  def start_assessment
  end
end

И файл route.rb: 

Rails.application.routes.draw do
  root controller: 'home', action: :index
  get 'start_assessment' => 'home#start_assessment'
end
...