从所选选项中获取href值并更改按钮的href

时间:2016-05-20 05:55:45

标签: javascript html href

我想获取所选选项的href值,以便现在可以转到我使用按钮选择的链接。

这是我的代码

<div class="modal fade" id="soa">
        <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">Choose the name of student</h4>
                </div>

                <div class="modal-body">
                    <div class="col-md-12">
                         <div class="form-group">
                            <label class="control-label"><span
                               class="text-danger"></span> Name of Student</label> 
                            <select name="childNames" class="form-control input-lg" id="childNames" data-size="5">
                               <option value="" selected disabled></option>
                               <option value="${pageContext.request.contextPath}/app/billsandpayments/invoice">John Dela Cruz</option>
                               <option value="${pageContext.request.contextPath}/app/billsandpayments/invoice1">Josh Dela Cruz </option>
                               <option value="${pageContext.request.contextPath}/app/billsandpayments/invoice2">Jane Dela Cruz</option>
                            </select>
                         </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href=''><button type="button" class="btn btn-info">View</button></a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

2 个答案:

答案 0 :(得分:2)

将ID添加到=&gt;

<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>

这应该有效:

$(document).ready(function() {

    $("#childNames").on('change', function () {

                var ref = document.getElementById("childNames").value;
                alert(ref);
                $('#link').attr('href', ref);

    });

});

jsfiddle example

答案 1 :(得分:0)

这里也是另一种选择。只需将其添加到您的脚本

即可
     <script type="text/javascript" >
        jQuery(document).ready(function($) {

            $("#childNames").change(function () {
                        var ref =$(this).find('option:selected').attr('value');
                        $('#link').attr('href', ref);

            });

        });
     </script>