Wie kann ich eine Mehrfachauswahl für option-Elemente einrichten?

Hallo Leute,

und zwar habe ich eine Seite erstellt, wo ich das Problem habe, dass ich nicht weiß, wie ich in diesem Beispiel von unten so einstellen kann, dass ich mehr als nur eine Option auswählen kann. Der Code steht unten.

<label class="sr-only">Hobbies<span class="red">*</span></label>
<select type="select" name="hobbies" aria-required="true" role="combobox" aria-multiline="true" aria-labelledby="hobbies" aria-placeholder="Hobbies" required>
  <option role="option" data-code="" value="">Abhängen</option>
  <option role="option" data-code="angeln" value="angeln">Angeln</option>
  <option role="option" data-code="anime&Manga" value="anime&Manga">Anime & Manga</option>
  <option role="option" data-code="" value="">Aquaristik</option>
  <option role="option" data-code="" value="">Architektur</option>
  <option role="option" data-code="" value="">Arrowtag</option>
  <option role="option" data-code="" value="">Astrologie</option>
  <option role="option" data-code="" value="">Astronomie</option>
  <option role="option" data-code="" value="">Backen</option>
  <option role="option" data-code="" value="">Badminton</option>
  <option role="option" data-code="" value="">Ballett</option>
  <option role="option" data-code="" value="">Bartending</option>
  (...)
</select>

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, Programmiersprache

15.04.2023, 19:21

Füge dem select-Element das multiple-Attribut hinzu.

Minibeispiel:

<select multiple>
  <option>A</option>
  <option>B</option>
</select>

Die Seitenbesucher können dann mehrere Optionen auswählen, in dem sie die Ctrl-Taste gedrückt halten und dazu die jeweiligen Optionen anklicken.

Nigabob187

Fragesteller

02.05.2023, 17:55

Kann man auch mit Option befehl auch mitcheckboxen machen,also mit option und select?

regex9

02.05.2023, 22:55

@Nigabob187

Innerhalb des select-Elements sind keine Checkbox-Elemente erlaubt. Du kannst dir aber trotzdem eine Komponente bauen, die visuell eine Auswahlliste mit Checkboxen anzeigt. Hier findest du ein paar konkrete Beispiele, wie man das bewerkstelligen könnte.

Hallo zusammen,

brauche nochmal einen Denkanstoß :)

Ich habe zwei Mal <select></select>, die sozusagen in Reihe funktionieren sollen. Wenn ich jetzt beim ersten select eine Option auswähle, soll die eine option bei der zweiten select disable=disabled werden.

Zur Vorstellung:

<select>
<option value="nike">Nike</option>
<option value="reebok">Reebok</option>
</select>

<select>
<option value="sneaker">Sneaker</option>
<option value="fußballschuhe">Fußballschuhe</option>
</select>

-> bei dem Beispiel soll z.B. bei der Auswahl "Nike" im ersten, beim zweiten beide optionen angezeigt werden. Wähle ich hingegen "Reebok" aus, soll im zweiten Select nur die Auswahl "Sneaker" gemacht werden können, also "Fußballschuhe" ausgeschaltet.

Wie gehe ich da vor? Mit den Ansätzen aus dem Internet komme ich noch nicht weiter, dafür ist mein Know-How nicht groß genug. :)

Vielen Dank!
Gruß

...zur Frage

HTML Selct value zu einer PHP Variable?

Naive wie ich bin habe ich es ausprobiert. Wie geschrieben brauche ich das ausgewählte im selsct, wenn es geht bitte in keinem form als PHP variable und zwar als $js.

<select id="trans" name="trans" onchange="<?= $js ?> = this.value">

<option value="de">Deutsch</option>

<option value="en">Englisch</option>

<option value="fr">Französisch</option>

<option value="es">Spanisch</option>

<option value="co">Koreanisch</option>

<option value="jp">Japanisch</option>

<option value="cn">Chinesisch</option>

</select>

Hier mal mein Versuch.

...zur Frage

Suchleiste in HTML mit Link?

Ich habe schon diese Suchleiste bzw. Auflistung:

</datalist>

</form>

</div>

wie schaffe ich es wenn ich diesen Code im Browser ausführe das wenn man in die Suchleiste Musikbox eingibt und Die Musikbox erscheint das man dort raufklicken kann und mit einem Link weitergeleitet wird?

...zur Frage

HTML multi select nur einen von mehreren auswählen?

Hallo zusammen,
ich will ein multiselect haben, mit mehreren values wie season (Jahreszeit). Dabei soll man natürlich aber nur eine der 4 ankreuzen können. Klar könnte man es jetzt als nicht multi machen, allerdings sind in dem multiselect auch Sachen drinnen wie ob es ein See ist oder Berge sind, was man ja auch noch ankreuzen kann.

<option value="season" >Option 1</option>

<option value="season">Option 2</option>

<option value="season">Option 3</option>

<option value="season">Option 4</option>

</select>

Und man soll halt hier vom value season nur 1 auswählen können aber gleichzeitig halt sea trz noch zusätzlich. Ist das irgendwie machbar?

...zur Frage

JavaScript: Preise aus mehreren Dropdown-Listen addieren?

Liebe*r Leser*in,

ich würde gerne in vier (4) Dropdown-Listen verschiedene Produkte mit teils verschiedenen Preisen auflisten. Je nach Auswahl soll dann eine Summe aus einem vorher festgelegtem Wert und zusätzlich die Summe aus jeweils einem Wert von jedem der vier Dropdown-Listen ausgegeben werden.

Also: Wert+Drop1+Drop2+Drop3+Drop4=Summe

Insgesamt habe ich 16 Produkte, die auf die Dropdown-Listen aufgeteilt sind, und einen Festwert, der als Startpunkt dient.

Mein Niveau ist als "totaler Anfänger" zu beschreiben. Daher bitte ich darum, nicht allzu viel vorauszusetzen. :)

Hier mal meine Zeilen:

        <div class="auswahlliste">
  			<select id="produktliste1">
  				<option value="0.60">Produkt1 (0,60 €)</option>
  				<option value="0.60">Produkt2 (0,60 €)</option>
  				<option value="0.60">Produkt3 (0,60 €)</option>
  				<option value="0.50">Produkt4 (0,50 €)</option>
  			</select>
  		</div>
  	
  		<div class="auswahlliste">
  			<select id="produktliste2">
  				<option value="1.10">Produkt1 (1,10 €)</option>
  				<option value="0.70">Produkt2 (0,70 €)</option>
  				<option value="0.65">Produkt3 (0,65 €)</option>
  				<option value="0.65">Produkt4 (0,65 €)</option>
  				<option value="0.60">Produkt5 (0,60 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste3">
				<option value="0.95">Produkt1 (0,95 €)</option>
				<option value="0.55">Produkt2 (0,55 €)</option>
				<option value="0.25">Produkt3 (0,25 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste4">
				<option value="0.60">Produkt1 (0,60 €)</option>
				<option value="0.60">Produkt2 (0,60 €)</option>
				<option value="0.60">Produkt3 (0,60 €)</option>
				<option value="0.50">Produkt4 (0,50 €)</option>
			</select>
		</div>

Die Summe soll dabei immer automatisch als Text ausgegeben und bei veränderter Auswahl auch neu berechnet und angezeigt werden.

Ich würde mich sehr freuen, wenn mir jemand helfen möchte!

Beste Grüße
4n0nym3r

...zur Frage

JQuery: Textfeld (input): Wie erreiche ich, dass bei Selektion von 2020/2021 das Jahr 2018 auf der Seite herauskommt?

Ich will, dass wenn man 2020/2021 aussucht, das Jahr 2018 herauskommt. Aber nicht in einem neuen Tab, sondern auf der Webseite!

das Jahr 2018 soll nicht in einem neuen Fester stehen, sondern einfach auf dem Formular

$("select[name=Symp]").change(function () {
  if ($(this).val().length > 0) {
    var sj = $(this).val().toString().split('/');
    alert((parseFloat(sj[0]) - 2));
  }
});

<div class="row" style="height: 28px;">
  <div class="form-inline">
    <div class="col-xs-12">
      <div class="form-group">
        <label for="Symp"><h4><b>im Schuljahr:</b></h4></label>
        {if $pdf}
          <input type="text" class="form-control" style="width:3cm"; name="Symp" value="{$values.Symp}">
        {else}
          <select class="form-control" name="Symp">
            <option value="" selected=""></option>
            <option value="2020/2021">2020/2021</option>
            <option value="2021/2022">2021/2022</option>
            <option value="2022/2023">2022/2023</option>
          </select>
        {/if}
      </div>
    </div>
  </div>
</div>

...zur Frage

Wie kann ich Zeilenumbrüche in einer E-Mail einfügen (PHP)?

Hallo,

ich habe mit HTML und PHP ein Kontaktformular erstellt, welches mir per E-Mail zugesendet wird.

Die einzelnen Felder in der E-Mail werden aber einfach hintereinander weg geschrieben und ich möchte Absätze nach jedem Feld einfügen, damit die E-Mail etwas schöner aussieht.

Hier der Code:

if (isset($_POST["submit"])) {
  mail("email-adresse", "Kontaktformular", 'Firma: '.$_POST["Firma"].'Branche: '.$_POST["Branche"].'Anrede: '.$_POST["Anrede"].
  'Name: '.$_POST["Name"].'Straße: '.$_POST["Straße"].'PLZ, Ort: '.$_POST["PLZ,Ort"].'Telefon: '.$_POST["Telefon"].'E-Mail: '.$_POST["E-Mail"].'Anmerkung: '.$_POST["Anmerkung"]);
?>
<h1 class="erfolg">Danke für Ihre Anfrage!</h1>
<?php
  }
?>
<form action="Kontakt.php" method="post">
  <legend>Kontaktformular</legend>
  <br>
  <!-- Titel für Eingabefelder -->
  <p>
    <label>Firma</label><br>
    <input type="text" name="Firma">
  </p>
  <p>
    <label>Branche</label><br>
    <input type="text" name="Branche">
  </p>
  <p>
    <label for="Anrede">Anrede*</label><br>
    <select name="Anrede" required>
      <option></option>
      <option>männlich</option>
      <option>weiblich</option>
      <option>divers</option>
    </select>
  </p>
  <p>
    <label>Name*</label><br>
    <input type="text" name="Name" required placeholder="">
  </p>
  <p>
    <label>Straße</label><br>
    <input type="text" name="Straße">
  </p>
  <p>
    <label>PLZ, Ort</label><br>
    <input type="text" name="PLZ, Ort">
  </p>
  <p>
    <label>Telefon</label><br>
    <input type="text" name="Telefon">
  </p>
  <p>
    <label>E-Mail*</label><br>
    <input type="email" name="E-Mail" required>
  </p>
  <p>
    <label>Anmerkung</label><br>
    <textarea rows="10" name="Anmerkung" placeholder=".">
    </textarea>
  </p>
  <p>
    <button type="submit" name="submit"><a>Versenden!</a></button>
  </p>
</form>

...zur Frage

Wie kann bei Videostart automatisch in den Fullscreenmodus gewechselt werden?

Hallo,

wie kann man am besten bei Videostart automatisch in den Fullscreenmodus wechseln?

Es geht mir um Videos, die ich auf voe.sx hochgeladen habe.

Der Fullscreen-Button hat folgende ID:

<button class="plyr__controls__item plyr__control" type="button" data-plyr="fullscreen">

Voller Auszug:

<button class="plyr__controls__item plyr__control" type="button" data-plyr="fullscreen">
  <svg class="icon--pressed" aria-hidden="true" focusable="false"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
  <svg class="icon--not-pressed" aria-hidden="true" focusable="false">
    <use xlink:href="#plyr-enter-fullscreen"></use>
  </svg>
  <span class="label--pressed plyr__tooltip">Exit fullscreen</span>
  <span class="label--not-pressed plyr__tooltip">Enter fullscreen</span>
</button>

Danke.

...zur Frage

Wie kann ich diesen HTML Vorgang stoppen?

Ich würde gerne einen HTML-Vorgang stoppen, wenn eine Voraussetzung in Java Skript nicht erfüllt ist:

Ich arbeite mit formsubmit.co und kann auf meiner Webseite nicht mit PHP arbeiten. Bis jetzt habe folgenden Code:

<form action="https://formsubmit.co/email@gutefrage.de" method="post" onsubmit="validateEmail()">
    <input type="hidden" name="_autoresponse" value=
    "Hallo, du hast diese Email bekommen. " />
    <input type="hidden" name="_next" value="https://www.gutefrage.net/" /> 
    <input type="email" id="email" name="email" placeholder="Email Address" /> 
    <label class="container"><input type="checkbox" required/>Ich habe die Nutzungsbedinungen gelesen.</label> 
    <button type="submit">Send</button>
</form>


<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("200") && email.includes("Frage") && email.length >= 20) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>

Das Skript überprüft die Eingabe der E-Mail Adresse, sofern alle Felder eingegeben sind und das Formular abgesendet wurde, ob die eingegebene E-Mail-Adresse "100", "Frage" und grösser oder gleich 20 Zeichen lang ist. Auf einer Nachricht im Browser wird angezeigt, ob die E-Mail-Adresse den Voraussetzungen entspricht oder nicht. Anschließend wird die Nachricht "Hallo, du hast diese E-Mail bekommen." an die eingegebene E-Mail-Adresse gesendet (das übernimmt formsubmit.co). Anschließend wird der Nutzer auf Gute Frage weitergeleitet.

Beides Funktioniert einwandfrei, jedoch wird, egal ob die E-Mail die Voraussetzungen erfüllt oder nicht, an die angegebene E-Mail gesendet.

Meine Frage ist, ob ich die Aktion in HTML irgendwie stoppen kann, also das die E-Mail nicht versendet wird, wenn sie die Voraussetzungen in JavaScript nicht erfüllt. Dabei kann ich keine riesigen Änderungen am gegebenen HTML-Code von formsubmit unternehmen (da dies ja immer noch funktionieren sollte) und ohne PHP oder ähnliches.

Edit: Das mit der Erkennung funktioniert irgendwie auch nicht, es zeigt immer an, dass die Email die Voraussetzungen nicht erfüllt. Ich habe jedoch ein Beispiel, wo dies funktioniert:

<form onsubmit="return validateEmail()" method="post">
    <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="z.B. ichbincool@email.com" size="40" required="" /> <input type="submit" value="senden" required="" />
</form>
<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("ich") && email.includes("cool") && email.length >= 5) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>

...zur Frage

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });

...zur Frage

Wie kann ich den HTML-Button mit CSS einfärben?

Hey, ich habe folgenden HTML-Code, der einen Button erstellt und möchte nun dem Button noch die Farbe #3BB54A geben.

<a href="https://nebelbusiness.de/" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" role="button">
  <span class="elementor-button-content-wrapper">
    <span class="elementor-button-text">Schreib mir jetzt auf WhatApps!</span>
  </span>
</a>

Es soll nur den einen Button betreffen. Es sind mehrere auf der Seite vorhanden.

Vielen lieben Dank für deine Hilfe!

...zur Frage

warum erhalte ich manchmal die Fehlermeldung Undefined variable: in in php?

Hallo,

ich erhalte die Fehlermeldung Undefined variable: xy in Dateipfad. jetzt ist meine Frage , woran das liegen könnte, weil ich vorher ohne eine Änderung gemacht zu haben, diese Fehlermeldung nicht erhalten habe. Die Variablen sind in HTML im name Attribute eingebettet das sieh zb so aus:<p><select name="corona_test_typ" id="ctt" required></p>

<option value="Schnelltest">Schnelltest</option>

</select> . Der Aufruf im php-Teil des Scriptes sieht so aus $corona_test_typ

Mein Problem ist nun, dass wenn ich die Fehlermeldung erhalte, wenn ich das PHP-Script über einen Button aufrufe aber bevor ich den submit Button klicke. Das heißt ja meckert ja schon bevor der spaß mit dem absenden losgeht.

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

Kronecker-Delta?

Wenn

Was bedeutet dann

? Ich meine wie soll man einem beliebigen Vektor aus V überhaupt einen Index zuweisen können?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen