Level 73
Share the code in text format in your question, and wrap it inside three back ticks `
function likeThis() {
}
Sep 13, 2022
5
Level 1
Dropdown select event jquery in Laravel
https://prnt.sc/Q3136a2jTehS Here is a drop-down menu retrieved from the database table. I have created 3- cards .But I want to show them when I click a particular name from the drop-down and then retrieve data for the particular selected name from the drop-down. Can anyone help me with these? I have tried some Jquery events but failed.
Level 1
<div class="container">
<div class="row">
<div class="column is-11 mx-auto">
<form action="{{route('pregnancy.store')}}" method="post">
@csrf
<div class="card mb-3">
<div class="card-header has-background-success">
<div class="card-header-title">
<i class="fa fa-info-circle"></i> Animal Details
</div>
</div>
<div class="card-content">
<div class="form-group mb-3">
<label for="">Animal Name:</label>
<select name="name" class="form-select input is-success is-small" id="details">
@foreach ($cows as $cow)
<option value="{{ $cow->name}}">{{ $cow->name}}</option>
@endforeach
</select>
</div>
<!-- Details of the specific Cow -->
```
When Selecting a name from the drop-down it will show its details here.
Level 1
<h1 class="is-size-3 has-text-centered p-2">Details of the cow</h1>
<div class="card-content">
<table class="table is-striped is-narrow">
<thead>
<th>Date of Birth</th>
<th>Animal Age</th>
<th>Animal Gender</th>
<th>Animal Type</th>
</thead>
<tbody>
<tr>
<td>10-02-1998</td>
<td>3 months</td>
<td>Male</td>
<td><label class="has-background-success-dark p-1 rounded text-white">Brahman</label></td>
</tr>
</tbody>
</table>
</div>
</div>
when click on the dropdowndown option then it will open and show the details here
Level 1
@Tray2 First of all ,the details of the cow Card will be hidden and when a particular option will be selected by user then the details card should be shown and retrieve the details of the particular cow
Level 73
@zahedalam So something like this, a bit simplified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.is-hidden {
display: none;
}
</style>
</head>
<body>
<select name="one" id="selecter">
<option value="zero">Zero</option>
<option value="one">One</option>
<option value="two">Two</option>
</select>
<section id="one" class="is-hidden">
<h2>Option 1 selected</h2>
</section>
<section id="two" class="is-hidden">
<h2>Option 2 selected</h2>
</section>
<script>
function init() {
document.querySelector('#selecter').addEventListener('change', (event) => {
update(event.target);
});
}
function hideSections() {
document.querySelectorAll('section').forEach((el) => {
el.classList.add('is-hidden');
});
}
function show(el) {
if (el.value === 'zero') return;
document.querySelector('#' + el.value).classList.remove('is-hidden');
}
function update(el) {
hideSections();
show(el);
}
init();
</script>
</body>
</html>
1 like
Please or to participate in this conversation.