时间戳

首页 > 解决方案 > 如何通过单击按钮获取更改时的选项值？

javascript - 如何通过单击按钮获取更改时的选项值？

问题描述

下面是代码示例，我需要通过单击按钮来获取更改时的选项值吗？
我在弹出窗口上显示一个表单，在该表单中我们有一个下拉项目。

<div class="col-sm-6 col-md-6">
  <div class="thumbnail">
    <img class="img-responsive" src="{{media url='wysiwyg/123.png'}}" alt="">
    <div class="caption">
      <h3 class="display-5">product heading1</h3>
      <hr>
      <p>product content goes here...!</p>
      <p><a href="#myModal" class="btn btn-default" role="button" data-toggle="modal">Request For Your product</a></p>
    </div>
  </div>
</div>

<select style='width:100%;box-sizing:border-box; font-size: 14px;font-weight: lighter;' name='LEADCF46'>
  <option value='-None-'>-None-</option>
  <option value='11 name'>11 product name</option>
  <option value='12 name'>12 product name</option>
</select>

标签： javascripthtmlcss

解决方案

我已经满足您的要求，请检查下面的代码并运行，因为我已经使用了两个按钮并获得了选定的值：

    <div class="container">
    <button type="button" id="btn1" class="btn btn-danger" data-toggle="modal" data-target="#form" value="11 name" onclick="myFunction('11 name')">
    See Modal with Form
    </button>  
    <button type="button"  id="btn2" class="btn btn-danger" data-toggle="modal" data-target="#form" value="12 name" onclick="myFunction('12 name')">
    See Modal with Form
    </button> 
</div>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div class="modal-body">

                    <div class="form-group">
                      <input type="hidden" id="btnmodal1">
                      <input type="hidden" id="btnmodal2">
                        <label for="email1">Email address</label>
                        <input  class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>
                    </div>
                    <div class="form-group">
                        <label for="password1">Password</label>
                        <input type="password" class="form-control" id="password1" placeholder="Password">
                    </div>
                    <select id="selectBox1" style='width:100%;box-sizing:border-box; font-size: 14px;font-weight: lighter;' name='LEADCF46'>
                    <option value='none'>none</option>
                        <option value='11 name'>11 product name</option>
                        <option value='12 name'>12 product name</option>
                    </select>
                </div>
                <div class="modal-footer border-top-0 d-flex justify-content-center">
                    <button type="button" class="btn btn-success submirrt" onclick="myFunction1()">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="valueeee1"></div>
<div class="valueeee2"></div>

<script>

function myFunction1() {
    var selectBox = document.getElementById("selectBox1");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    $(".valueeee2").html(" <b>"+selectedValue+"</b>.");

    $("#form .close").click();
    $("#selectBox1 option[value='"+selectedValue+"']").attr("selected", false);
}


function myFunction(btnvalues) {
   $("#selectBox1 option[value='"+btnvalues+"']").attr("selected", true)


}

  </script>

推荐阅读