Question

我想创建可以更改日期值的表单。然后当点击按钮可以弹出一个模态按照打开一个网址选定值.....

像：

我如何传递价值来实现这一目标？

＆＃13;

    <div class="row">
        <div class="center-block" style="width:80%;">
            <form method="get">
                <!-- Button trigger modal -->
                               
                <select class="selectpicker" name="yy">
                  <option value="2017">2017</option>
                </select>Year

                <select class="selectpicker" name="mm">
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                </select>month
                
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                  View History Flow
                </button>
            </form>

</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"> Modal title </h4>
      </div>
      <div class="modal-body">
      
      <iframe src="http://xxx.xxx.xxx/yy/mm/" frameborder="0" height="800" width="100%" onload="resizeIframe(this);"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

＆＃13;

Answer 1

你可以这样做：

$('button[data-target="#myModal"]').click(function() {
  var iframe = $("#myModal iframe");

  var year = $(".selectpicker[name=yy]").val();
  var month = $(".selectpicker[name=mm]").val();

  var src = iframe.attr("src");

  src = src.replace("yy", year);
  src = src.replace("mm", month);
  iframe.attr("src", src)

  alert(iframe.attr("src"))
})

以下示例

$('button[data-target="#myModal"]').click(function() {
  var iframe = $("#myModal iframe");
  
  var year = $(".selectpicker[name=yy]").val();
  var month = $(".selectpicker[name=mm]").val();
  
  var src = iframe.attr("src");
  
  src = src.replace("yy", year);
  src = src.replace("mm", month);
  iframe.attr("src", src)
  
  alert(iframe.attr("src"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div class="center-block" style="width:80%;">
            <form method="get">
                <!-- Button trigger modal -->
                               
                <select class="selectpicker" name="yy">
                  <option value="2017">2017</option>
                </select>Year

                <select class="selectpicker" name="mm">
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                </select>month
                
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                  View History Flow
                </button>
            </form>

</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"> Modal title </h4>
      </div>
      <div class="modal-body">
      
      <iframe src="http://xxx.xxx.xxx/yy/mm/" frameborder="0" height="800" width="100%" onload="resizeIframe(this);"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

如何将选择值从按钮传递给模态URL

1 个答案: