Um die Benutzerfreundlichkeit erhöhen.
Auch dieses jQuery-Script behandelt Auswahllisten. Hier wird jeweils eine Liste ausgeblendet wenn ein Eintrag aus der anderen Liste gewählt wurde. Im Beispiel hier soll ein Ferienhaus anhand der Anzahl der Doppelbetten oder anhand der Anzahl der maximalen Gäste über ein Suchformular gesucht werden. Die jeweils andere Liste wird ausgeblendet wenn in der anderen ein Eintrag gewählt wurde.
Dadurch wird vermieden, dass sich widersprechende Daten in einem Formular übertragen werden. Das Ausblenden der anderen Auswahlliste erhöht also die Benutzerfreundlichkeit.
Script Auswahlliste ausblenden:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <script> $(document).ready(function(){ $('#sleeps').click(function(){ sleeps_choosed = ($('#selectGetSelected_sleeps').val()); if(sleeps_choosed != 'Auswahl') { $("#selectGetSelected_guests").empty(); $("<option></option>").val("Betten gewählt").text("Betten gewählt").prependTo("#selectGetSelected_guests"); $('#guest_to').attr('style','display: none;'); $('#choose').attr('style','display: none;'); } if(sleeps_choosed == 'Auswahl') { $("#selectGetSelected_guests").empty(); $("<option></option>").val("Auswahl").text("Auswahl").prependTo("#selectGetSelected_guests"); $("<option></option>").val("1").text("1").appendTo("#selectGetSelected_guests"); $("<option></option>").val("2").text("2").appendTo("#selectGetSelected_guests"); $("<option></option>").val("3").text("3").appendTo("#selectGetSelected_guests"); $("<option></option>").val("4").text("4").appendTo("#selectGetSelected_guests"); $("<option></option>").val("5").text("5").appendTo("#selectGetSelected_guests"); $("<option></option>").val("6").text("6").appendTo("#selectGetSelected_guests"); $("<option></option>").val("7").text("7").appendTo("#selectGetSelected_guests"); $("<option></option>").val("8").text("8").appendTo("#selectGetSelected_guests"); $("<option></option>").val("9").text("9").appendTo("#selectGetSelected_guests"); $("<option></option>").val("10 und mehr").text("10 und mehr").appendTo("#selectGetSelected_guests"); $('#guest_to').removeAttr('style'); $('#choose').removeAttr('style'); } }); $('#guest_to').click(function(){ guests_choosed = ($('#selectGetSelected_guests').val()); if(guests_choosed != 'Auswahl') { $("#selectGetSelected_sleeps").empty(); $("<option></option>").val("Gäste gewählt").text("Gäste gewählt").prependTo("#selectGetSelected_sleeps"); $('#sleeps').attr('style','display: none;'); $('#choose').attr('style','display: none;'); } if(guests_choosed == 'Auswahl') { $("#selectGetSelected_sleeps").empty(); $("<option></option>").val("Auswahl").text("Auswahl").prependTo("#selectGetSelected_sleeps"); $("<option></option>").val("1 - 2").text("1 - 2").appendTo("#selectGetSelected_sleeps"); $("<option></option>").val("3 - 4").text("3 - 4").appendTo("#selectGetSelected_sleeps"); $("<option></option>").val("5 und mehr").text("5 und mehr").appendTo("#selectGetSelected_sleeps"); $('#sleeps').removeAttr('style'); $('#choose').removeAttr('style'); } }); }); </script> |
Hier das Beispiel für eine ausgeblendete Auswahlliste:
oder
Bewerte den Artikel, wenn du magst:
[Gesamt: 29 Durchschnitt: 4.8/5]