Question

我正在尝试创建一个网页表单，您可以在其中看到一个选择下拉列表，如果您从下拉列表中选择一个值，则会打开一个对您选择的值唯一的模式表单你可以填写它。根据我的理解，这被认为是级联下拉列表。

我面临的问题是试图找到一种方法，从下拉列表中为每个唯一值创建不同的模态表单。假设我的选择列表是一堆水果，如果我从下拉列表中选择“苹果”，我想要一个“苹果”的模态表单，以及如果我打开“橙子”的模态表单从下拉列表中选择“oranges”。

我用来在有一个onChange（）后出现模态的函数

这是我的头脑元素：

<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这是我的body元素，带有选择下拉列表，以及两个用于“Apples”和“Oranges”的模态形式：

<div>
<select id="fruitlist">
    <option value="main">Select Fruit:</option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="pineapples">Pineapples</option>
    <option value="strawberries">Strawberries</option>
</select>
</div>

  <div class="modal fade" id="appleModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-apple"></span> Fruit - Apples</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="appleName"><span class="glyphicon glyphicon-user"></span> Name</label>
              <input type="text" class="form-control" id="appleName" placeholder="Enter your name">
            </div>
            <div class="form-group">
              <label for="appleAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
              <input type="text" class="form-control" id="appleAddress" placeholder="Enter your address">
            </div>
            <div class="form-group">
              <label for="appleTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
              <input type="text" class="form-control" id="appleTelephone" placeholder="Enter your telephone number">
            </div>
            <div class="form-group">
              <label for="appleAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
              <input type="text" class="form-control" id="appleAmount" placeholder="Enter the amount of fruits you wish to purchase">
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        </div>
      </div>

    </div>
  </div>


  <div class="modal fade" id="orangeModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-apple"></span> Fruit - Oranges</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="orangeName"><span class="glyphicon glyphicon-user"></span> Name</label>
              <input type="text" class="form-control" id="orangeName" placeholder="Enter your name">
            </div>
            <div class="form-group">
              <label for="orangeAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
              <input type="text" class="form-control" id="orangeAddress" placeholder="Enter your address">
            </div>
            <div class="form-group">
              <label for="orangeTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
              <input type="text" class="form-control" id="orangeTelephone" placeholder="Enter your telephone number">
            </div>
            <div class="form-group">
              <label for="orangeAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
              <input type="text" class="form-control" id="orangeAmount" placeholder="Enter the amount of fruits you wish to purchase">
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        </div>
      </div>

    </div>
  </div>

这是我在选择下拉列表中有onChange（）后用来执行该函数的脚本：

    <script>
    $(document).ready(function(){
        $("#fruitlist").change(function(){
            $("#appleModal").modal();
        });
    });
    </script>

正如您所看到的，如果您插入代码并运行它，无论您在下拉列表中做出什么选择，它都只会执行“Apples”模式。为清楚起见，我想为“苹果”选择值显示“苹果”模态，为“橙色”选择值显示“橙色”模态，为“菠萝”选择值显示“菠萝”模式，依此类推。我试图想出解决这个问题的不同方法，例如if语句，如果选择了apple select值，则显示apples模态形式，或某种循环，其中每个int值分配给每个选择值，显示相应的模态形式。我试图这样做，但没有成功。我可能会以错误的方式接近这一点。

我花了大约15分钟试图找到建议的主题，以确保我在提交之前没有提出重复的问题，我无法找到一个可以帮助我特别针对我的问题。我是新手使用级联下拉列表，可以真正使用一些帮助。非常感谢你！

Answer 1

对于初学者，您需要所选选项的值，您可以在更改闭包中使用$(this).val()获取该值。

然后，一种方法是给出与这些值对应的模态数据属性。例如，你的苹果模态将得到一个数据属性，如。

<div class="modal fade" data-select="apples" id="appleModal" role="dialog">
   //
</div>

然后你可以用

打开正确的模态

$(document).ready(function(){
    $("#fruitlist").change(function(){
        $('.modal[data-select="' + $(this).val() + '"]').modal());
    });
});

Answer 2

我建议将select中的选项值更改为singular并使用它来追加以找到相应的模态。

$("#fruitlist").change(function(){   
   var value = $(this).val();
  $('#' + value + "Modal").modal({show: 'true'});
});

示例：http://jsfiddle.net/9nmc6zjc/4/

尝试使用级联下拉列表，并希望在下拉列表

2 个答案: