Question

我尝试制作一个在用户做出选择后发生变化的表单。如果用户选择＆＃34;选项A＆＃34;然后用类＆＃34; option1＆＃34;。

显示div的内容

我已经用非常简单的jquery完成了这个（参见下面的代码或jsfiddle）。我无法弄清楚的是如何让它变得动态。

以下是我将如何做到这一点：

从＆＃34;＃select＆＃34;获取所有选项值并投入阵列。
替换＆＃34; hideAll＆＃34;的内容使用新数组运行。
制作某种＆＃34; for-each-function＆＃34;通过数组运行制作if stament。

注意：选项值始终与div类相同。

＆＃13;

            mail.Body = message;
            try
            {
                mail.To.Add(new MailAddress("To Address"));

            }
            catch
            {

            }

            client.Credentials = new System.Net.NetworkCredential("smtp.live.com", "password");
            client.EnableSsl = true;


            try
            {
                System.Net.ServicePointManager.ServerCertificateValidationCallback = delegate(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors) { return true; };
                client.Send(mail);
                mail.To.Clear();

            }
            catch (Exception ex)
            {

            }

        }

＆＃13;

var hideAll = function() {
  $('.option1, .option2, .option3').hide();
}

$('#select').on('change', function() {
  hideAll();
  var category = $(this).val();
  console.log(category);
  if (category === 'option1') {
    $('.option1').show();
  }
  if (category === 'option2') {
    $('.option2').show();
  }
  if (category === 'option3') {
    $('.option3').show();
  }
});

＆＃13;

Answer 1

给你的选项div另一个类

<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

在hideall

中使用新课程

var hideAll = function() {
    $('.optiondiv').hide();
}

使用选择值显示块

$('#select').on('change', function() {
    hideAll();
    var category = $(this).val();
    $('.' + category).show();
});

http://jsfiddle.net/yd5qsquL/

Answer 2

根本不需要循环，你可以搜索任何以option开头的div：

var hideAll = function() {
  $('div[class^=option]').hide();
}

$('#select').on('change', function() {
  hideAll();
  var category = $(this).val();

  $('.' + category).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

Answer 3

我认为有一种更简单的方法可以解决这个问题。首先，为HTML使用ID和类的组合，然后使用JQuery为您处理动态内容。

HTML

请注意，我已为每个div添加了class="option-grouping" id="option1"等。这是更好的语义结构，使JQuery更容易。

<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

JQuery

这是很酷的部分。完成所有操作后，请尝试将其作为JQuery：

$('#select').on('change', function() {
    var category = $(this).val();
    /* Hide all the divs */
    $('.option-grouping').hide();
    /* Now unhide the selected options */
    $('#' + category).show();
});

努力享受！

根据选择值显示div

3 个答案: