Как бы я показать элементы на основе того, что выбрано в раскрывающемся списке, используя jQuery? - PullRequest
Новая
       4

Как бы я показать элементы на основе того, что выбрано в раскрывающемся списке, используя jQuery?

2 голосов
/ 08 января 2010

Вот мой выпадающий список: 

<select name="">
  <option value="">--Select One--</option>
  <option value="textarea">Text Area</option>
  <option value="textbox">Text Box</option>
  <option value="checkbox">Check Box</option>
  <option value="dropdown">Drop Down</option>
</select>

Я хочу показать, показать / скрыть другие элементы на странице, если в раскрывающемся списке выбраны определенные параметры.

Таким образом, если выбрать «Текстовая область», то будет показан div с идентификатором «textarea_fields». Если затем будет выбрано что-то еще, это будет скрыто, и для этого параметра выбора будет показан другой элемент.

Я использую jQuery, поэтому, безусловно, можно использовать то, что предлагает эта библиотека.

Ответы [ 3 ]

8 голосов
/ 08 января 2010

Предполагая, что каждый div имеет класс ".panel" 

$("select").change(function(){
  $(".panel").hide().filter("#"+ $(this).val() +"_fields").show();
});

Вы можете расширить эту базу, чтобы увидеть, соответствует ли новый выбор, который в настоящее время видим, если хотите. Вы можете определить, что в данный момент открыто, как это: 

var currPanel = $(".panel:visible").attr("id");
1 голос
/ 08 января 2010

Возможно, вы захотите поместить div в такой класс: 

<div class='theFields' id='textarea_fields'>...</div>    
<div class='theFields' id='checkbox_fields'>...</div>

Тогда вы можете сделать что-то вроде этого: 

$("select").change(function() {
  $(".theFields").hide(); // hide all field divs
  $("#"+$(this).val()+"_fields").show(); // the the one you want
});
0 голосов
/ 08 января 2010

О, хорошо, так как я уже потратил некоторое время на написание этого кода, можно также опубликовать все коды. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(function() {
      $("#elements > *").hide();
      $("#selector").change(function(){
          $("#elements > *").hide();
          if($("#selector").val()) //if selected has value, then show the selected one
            $("#" + $("#selector").val()).show();
      });
    });

    </script>
</head>
<body>
  <select id="selector">
    <option value="">--Select One--</option> <!-- this hides all -->
    <option value="textarea">Text Area</option>
    <option value="textbox">Text Box</option>
    <option value="checkbox">Check Box</option>
    <option value="dropdown">Drop Down</option>
  </select>

  <div id="elements"> <!-- container for the input elements-->
    <textarea id="textarea"></textarea>
    <input type="text" id="textbox" />
    <input type="checkbox" id="checkbox" />
    <select id="dropdown"><option>...</option></select>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...