Michael: Onlick Event soll Dropdownfeld ändern

SELF-Forum

Onlick Event soll Dropdownfeld ändern

Michael
– Informationen zu den Bewertungsregeln

Hi,

Bisher habe ich in meinem Formular per Javascript Formularfelder wie folgt über eine onclick-Event beeinflussen können:

  
function myEvents(wert1,wert2) {  
  
      document.meinform.suchbegriff.value = wert1;  
      for (i = 0; i < document.meinform.UserID.length; i++)  
      if (document.meinform.UserID.options[i].value == wert2)  
      document.meinform.UserID.selectedIndex = i;  
      }  
      </script>

Über einen Button, der per onclick Parameter an die Funktion übergibt - z.b. onclick="myEvents('blabla','3')" - wurde mir dann z.b. der Suchbegriff in das Textfeld eingetragen und der User aus dem dafür zuständigen Dropdown ausgewählt.

Nun habe ich das Jquery-Plugin chosen implementiert, welches klasse funktioniert.

Nur genau beim obigen Fall kann ich über diesen Code per Javascript das Dropdownfeld nicht mehr beeinflussen bzw. ändern.

Kann mir jemand sagen, woran das wohl liegt bzw. wie ich das bei Verwendung von chosen wieder erreoichen kann (das das gewählte Element des Dropdown über meine onclick-Funktion geändert wird)?

Gruß, Michael

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Onlick Event soll Dropdownfeld ändern / Codebeispiel

    Michael
    – Informationen zu den Bewertungsregeln

    Hi,

    anbei mal ein Codebeispiel, bei dem 1 Textfeld und 1 Dropdownfeld korrekt durch das Onclick-Event geändert werden, sowie 1 Chosen-Dropdownfeld, das NICHT durch dasselbe Event geändert wird.

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
 <head>  
 <script type="text/javascript" src="jq/jquery.min.js"></script>  
<!-- chosen -->  
  <script type="text/javascript" src="jq/chosen/chosen.jquery.js"></script>  
  <link rel="stylesheet" href="jq/chosen/chosen.css" type="text/css" media="all">  
  <link rel="stylesheet" href="jq/ui.css" type="text/css" media="all">  
  <script type="text/javascript">  
$(function(){  
$(".chosen").chosen({  
    no_results_text: "Oops, nichts gefunden!",  
    allow_single_deselect: true,  
    search_contains: true,  
    disable_search_threshold: 10,  
    placeholder_text_single: 'Bitte wählen...'  
  });  
});  
</script>  
 </head>  
 <body>  
<script>  
function myEvents(wert1,wert2,wert3) {  
document.forms['meinform']['textfield1'].value = wert1;  
for (f = 0; f < document.meinform.Einheit1.length; f++) {  
if (document.meinform.Einheit1.options[f].value == wert2) {  
document.forms['meinform']['Einheit1'].selectedIndex = f;  
}  
if (document.meinform.Einheit2.options[f].value == wert3) {  
document.forms['meinform']['Einheit2'].selectedIndex = f;  
}  
}  
}  
</script>  
  
<FORM name="meinform" ACTION="" METHOD=POST>  
<INPUT TYPE=text name='textfield1'>  
  
<select name='Einheit1'>  
<OPTION VALUE="Stück">Stück</OPTION>  
<OPTION VALUE="l">Liter</OPTION>  
<OPTION VALUE="ml">Milliliter</OPTION>  
<OPTION VALUE="kg">KG</OPTION>  
<OPTION VALUE="g">Gramm</OPTION>  
<OPTION VALUE="m">Meter</OPTION>  
</SELECT>  
  
<select class='chosen' name='Einheit2'>  
<OPTION VALUE="Stück">Stück</OPTION>  
<OPTION VALUE="l">Liter</OPTION>  
<OPTION VALUE="ml">Milliliter</OPTION>  
<OPTION VALUE="kg">KG</OPTION>  
<OPTION VALUE="g">Gramm</OPTION>  
<OPTION VALUE="m">Meter</OPTION>  
</SELECT>  
</form>  
  
<div class='button_wareneingang'><INPUT TYPE=submit VALUE="&nbsp;klick&nbsp;" onclick="myEvents('Hallo','ml','ml')"></div>  
 </body>  
</html>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ergänzende Frage

      Michael
      – Informationen zu den Bewertungsregeln

      Hi,

      ich versuche es mal mit einer Teilfrage, die mich ggf. auch schon einen Schritt weiter bringt.

      Wie würde ich den nachfolgenden Code denn ustricken müssen, wenn ich die Formularfelder mit Jquery manipulieren wollte? Wie man ein (einziges) Formularfeld mit der Jquery Funktion change() manipuliert, weiß ich schon, aber ich mir ist nicht ganz klar, wie ich über eine javascript funktion (also hier myEvents) mehrere Formularfelder (insb. ein selectfeld) über Jquery ändern muß.

        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
 <head>  
 <script type="text/javascript" src="slbox/jquery.min.js"></script>  
 </head>  
 <body>  
  
<script>  
function myEvents(wert1,wert2) {  
//alert(wert1 + ' ' + wert2);  
//document.meinform.textfield1.value = wert1;  
document.forms['meinform']['textfield1'].value = wert1;  
for (f = 0; f < document.meinform.Einheit1.length; f++) {  
//alert(document.meinform.Einheit.options[f].value);  
if (document.meinform.Einheit1.options[f].value == wert2) {  
document.forms['meinform']['Einheit1'].selectedIndex = f;  
}  
}  
}  
</script>  
  
<FORM name="meinform" ACTION="" METHOD=POST>  
<INPUT TYPE=text name='textfield1'>  
  
<select name='Einheit1'>  
<OPTION VALUE="Stück">Stück</OPTION>  
<OPTION VALUE="l">Liter</OPTION>  
<OPTION VALUE="ml">Milliliter</OPTION>  
<OPTION VALUE="kg">KG</OPTION>  
<OPTION VALUE="g">Gramm</OPTION>  
<OPTION VALUE="m">Meter</OPTION>  
<OPTION VALUE="v">Verpackungseinheit</OPTION>  
</SELECT>  
  
</form>  
  
<div class='button_wareneingang' id='aaa'><INPUT TYPE=submit VALUE="&nbsp;klick&nbsp;" onclick="myEvents('Hallo','ml','ml')"></div>  
 </body>  
</html>

      Gruß, Michael

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln