J'ai un menu déroulant avec des options comme:
J'ai 4 divs:
Donc, ce que je veux, c'est que si je sélectionne " Tous " dans la liste déroulante, la div " Tous les onglets " devrait se charger uniquement, et si sélectionnez " 21 avril 2019 ", l '" Onglet 21 avril " doit se charger uniquement, et de même.
Comment puis-je y parvenir? p >
Cordialement, Bill
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="card shadow-2 mb-3">
<div class="card-header">
<div class="col-9 pl-0 float-left">
<h4 class="card-heading mt-3 pt-2">
Price Breakdown
</h4>
</div>
<div class="col-3 float-right">
<select class="form-control custom-select" id="conditionsselect1">
<option selected="selected" value="">All</option>
<option>21 April 2019</option>
<option>22 April 2019</option>
<option>23 April 2019</option>
</select>
</div>
</div>
<div>All Tab</div>
<div>21 April Tab</div>
<div>22 April Tab</div>
<div>23 April Tab</div>
</div>
3 Réponses :
essayez-vous quelque chose comme ça
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="card shadow-2 mb-3">
<div class="card-header">
<div class="col-9 pl-0 float-left">
<h4 class="card-heading mt-3 pt-2">
Price Breakdown
</h4>
</div>
<div class="col-3 float-right">
<select class="form-control custom-select" id="conditionsselect1">
<option selected="selected" value="all">All</option>
<option value="one">21 April 2019</option>
<option value="two">22 April 2019</option>
<option value="three">23 April 2019</option>
</select>
</div>
</div>
<div class="dyn-div all">All Tab</div>
<div class="dyn-div one">21 April Tab</div>
<div class="dyn-div two">22 April Tab</div>
<div class="dyn-div three">23 April Tab</div>
</div>
$(document).ready(function(){
$(".dyn-div").hide();
$(".dyn-div."+$("#conditionsselect1").val()+"").show();
$("#conditionsselect1").change(function(){
var val = $("#conditionsselect1").val();
// $('.dyn-div:contains("'+val+'")').show();
// if(val == "all")
// {
// $(".dyn-div").show();
// }
// else
// {
$(".dyn-div").hide();
$(".dyn-div."+val+"").show();
// }
});
});
$(document).ready(function(){
$("#conditionsselect1").change(function(){
var val = $("#conditionsselect1").val();
// $('.dyn-div:contains("'+val+'")').show();
$(".dyn-div").hide();
$(".dyn-div."+val+"").show();
});
});
Cela fonctionne, mais l'OMI, il serait préférable de définir un attribut pour correspondre à la div plutôt que de se fier au contenu de la div, qui pourrait facilement être modifié. Idéalement, une "valeur" serait définie dans les options de liste déroulante dans le même but également, de sorte que si la description change à l'avenir (ou peut être modifiée, par exemple, différents formats de date dans différents pays), elle ne rompt pas le code. Le fonctionnement de la fonctionnalité ne doit pas dépendre des spécificités de l'apparence de l'interface utilisateur.
@ADyson Nous devons donc faire quelque chose comme ça par identifiant ou nom de classe, n'est-ce pas? En fonction de la valeur de la liste déroulante, nous devons correspondre à l'id ou à un autre attr
À mon avis, ce serait une façon plus durable de le faire que cette solution, oui
J'ai fait quelques changements dans le HTML et j'ai ajouté du code jquery. Parcourez simplement le code pour avoir une idée de la manière d'aborder le problème.
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
$('#conditionsselect1').on('change',function(){
let selectVal= $(this).children("option").filter(":selected").attr('class');
$('body table tbody').find('tr').hide();
$('body table tbody').find('tr[class="'+selectVal+'"]').show();
})
</script>
</head>
<body>
<div class="card shadow-2 mb-3">
<div class="card-header">
<div class="col-9 pl-0 float-left">
<h4 class="card-heading mt-3 pt-2">
Price Breakdown
</h4>
</div>
<div class="col-3 float-right">
<select class="form-control custom-select" id="conditionsselect1">
<option value="all" class="all">All</option>
<option class="21">21 April 2019</option>
<option class="22">22 April 2019</option>
<option class="23">23 April 2019</option>
</select>
</div>
</div>
<table class="table table-user-information">
<thead>
<tr>
<th></th>
<th>Gross</th>
<th>Net</th>
</tr>
</thead>
<tbody>
<tr class="21">
<td>Hello</td>
<td>£30.00</td>
<td>0.00</td>
</tr>
<tr class="22">
<td>Hello 1</td>
<td>£10.00</td>
<td>0.00</td>
</tr>
<tr class="23">
<td>Hello 2</td>
<td>£7.00</td>
<td>£7.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Veuillez vérifier que cela peut être utile.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="card shadow-2 mb-3">
<div class="card-header">
<div class="col-9 pl-0 float-left">
<h4 class="card-heading mt-3 pt-2">
Price Breakdown
</h4>
</div>
<div class="col-3 float-right">
<select class="form-control custom-select jqSelector" id="conditionsselect1">
<option selected="selected" value="" data-show="all">All</option>
<option data-show="first">21 April 2019</option>
<option data-show="second">22 April 2019</option>
<option data-show="third">23 April 2019</option>
</select>
</div>
</div>
<div class="dataDivs all">All Tab</div>
<div class="dataDivs all first">21 April Tab</div>
<div class="dataDivs all second">22 April Tab</div>
<div class="dataDivs all third">23 April Tab</div>
</div>
$(".jqSelector").change(function(){
$(".dataDivs").hide();
var optn = $(this).find(':selected').attr('data-show');
//alert(optn);
$("." + optn).show();
});
la question dit "si je sélectionne" Tous "dans la liste déroulante, le div" Tous les onglets "devrait se charger uniquement" ... mais votre code ne le fait pas.
Je pense que tout cela signifie montrer toutes les informations si ce n'est pas simplement supprimer toutes les classes dans les divs d'informations.
Qu'est ce qui te fait penser ça? La question dit, plus précisément, "le div Tous les onglets ne doit charger que ". Je ne sais pas si le PO le souhaite vraiment, mais c'est ce qu'il demande actuellement. Nous ne pouvons pas douter de leur intention. Si vous n'êtes pas sûr de ce que signifie quelque chose dans la question, postez un commentaire avant de répondre et obtenez des éclaircissements du PO.
@chandershekhar AD a raison. Y a-t-il un moyen que je ne puisse afficher "Tous les onglets" que lorsque je sélectionne l'option "Tous" qui est par défaut. Le reste semble bien!
@BillNathan dans ce cas, supprimez simplement la classe "all" des 3 dernières divs. De plus, si "tout" est toujours sélectionné par défaut au début, vous pouvez envisager de masquer les 3 dernières divs par défaut, afin qu'elles n'apparaissent pas lors du premier chargement de la page. L'ajout de l'attribut style = "display: none;" à chacune de ces 3 divs permettrait d'y parvenir.
si vous sélectionnez
21 avril 2019, la première ligne pourrait s'afficher? ou posez la question clairement.Je vois que vous essayez d'utiliser jquery. Vous devriez essayer de comprendre comment le JavaScript de base est écrit, puis lire quelques guides de base de jquery pour avoir une idée de la façon dont la manipulation de base de dom est accomplie. Vous devriez être en mesure de trouver une solution par vous-même après cela. Pour stackoverflow, cette question est un peu trop large car vous n'avez pas tenté de la faire fonctionner.
«doit être remplacé par le contenu associé» - et quel est le contenu associé? Comment avez-vous associé quelque chose à quoi que ce soit ici?
@UdhayTitus J'ai amélioré ma question. Peut-être que c'est plus facile à comprendre maintenant?
@ 04FS A révisé la question, pouvez-vous jeter un œil, s'il vous plaît.
Tout d'abord, vous devez avoir un moyen d'associer les div aux options de l'onglet, par exemple en utilisant des classes ou des attributs de données pour correspondre à la valeur de l'option. Ensuite, vous devrez écrire un code qui détectera un clic sur un bouton d'onglet, trouver le div associé (en sélectionnant celui avec l'attribut correspondant), masquer tous les onglets, puis afficher celui que vous avez trouvé comme le correspondant à un. Alors ... c'est le processus logique, mais qu'avez-vous recherché ou essayé jusqu'à présent vous-même? Avez-vous étudié la question?
P.S. Cela dit, je vois que vous avez inclus Bootstrap, et bootstrap fournit essentiellement cette fonctionnalité prête à l'emploi. Voir getbootstrap.com/docs/4.0/components/navs/#tabs et getbootstrap.com/docs/4.0/components/navs/#javascript-behavi Ou . Avez-vous remarqué cela lors de vos recherches?
Oui, je connais les onglets Bootstrap, mais cela ne fonctionnera pas avec l'option de sélection? Ai-je raison?
Il y a même getbootstrap.com/docs/4.0/components/navs/# tabs-with-dropdow ns également. Mais à la fin de la journée, est-ce vraiment important qu'il s'agisse d'un menu déroulant ou d'un menu horizontal? Je suppose que vous prévoyez peut-être d'avoir un grand nombre d'options qui pourraient ne pas s'adapter horizontalement, c'est tout ce que je peux supposer?