javascript - 尝试使用级联下拉列表，并希望为下拉列表中的每个唯一值显示不同的模式形式

Question

我正在尝试制作一个网页表单，您可以在其中看到一个选择下拉列表，如果您从下拉列表中选择一个值，则会打开一个与您选择的值唯一的模态表单起来，你就可以填写了。据我了解，这被认为是级联下拉列表。

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

我用来在 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”模式。为了清楚起见，我想为“Apples”选择值显示“Apples”模态，为“Orange”选择值显示“Orange”模态，为“Pineapples”选择值显示“Pineapples”模态等等。我试图想出不同的方法来解决这个问题，例如 if 语句，其中如果选择了苹果选择值，则显示苹果模态形式，或者某种循环，其中将每个 int 值分配给每个选择值，显示相应的模态形式。我试图这样做，但没有成功。我可能以错误的方式处理这个问题。

我花了大约 15 分钟试图找到建议的线程，以确保在提交此问题之前我没有问重复的问题，但我无法找到可以专门帮助我解决我的问题的线程。我不熟悉使用级联下拉列表，确实需要一些帮助。非常感谢!

Answer 1

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

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

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