<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<select id="mySelect">
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Grapes">Grapes</option>
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<label>Fruits :</label>
<button class="btn btn-danger" value="Apple">Apple</button>
<button class="btn btn-warning" value="Mango">Mango</button>
<button class="btn btn-success" value="Grapes">Grapes</button>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$('button').click(function(){
var fruit = $(this).val();
console.log(fruit)
$('#mySelect').val(fruit).trigger('change');
})
});
</script>
</html>
Comments
Post a Comment
If you any doubt of any topic then you can comment me.