I have a bootstrap modal with a select input element. on click of a button, I need to open up the modal and change the selection of a select element. Please see below JS fiddle link. How can I get this working?
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button id="audi" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Open modal with Audi Selected</button>
<button id="mercedes" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Open modal with Mercedes Selected</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<select id="selection">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS
this.$("#audi").click(function() {
$("#myModal #selection option[value='file']").attr('selected', 'selected');
});
Since button's id
matches with select option value, you can set this
element's id as the value of the select element.
Try the following way:
$("#audi,#mercedes").click(function() { var idAsValue = $(this).attr('id'); $("#selection").val(idAsValue); });
.btn-info { margin-bottom: 50px; }
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <button id="audi" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Open modal with Audi Selected</button> <button id="mercedes" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Open modal with Mercedes Selected</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <select id="selection"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Try this..
this.$(".btnCustom").click(function() { var value = $(this).attr('id'); $("#myModal #selection option[value="+value+"]").attr('selected', 'selected'); });
.btn-info { margin-bottom: 50px; }
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <button id="audi" class="btn btn-primary btn-block btnCustom" data-toggle="modal" data-target="#myModal">Open modal with Audi Selected</button> <button id="mercedes" class="btn btn-primary btn-block btnCustom" data-toggle="modal" data-target="#myModal">Open modal with Mercedes Selected</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <select id="selection"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.