select feld im Formular direkt anwenden NUR WIE?

mogmog

mogmog

Erfahrenes Mitglied
Hallo zusammen ich habe mal eine frage.

Ich nutze für einige kleine Animationen JQuery nur habe ich jetzt eine Idee gehabt weiß leider nur nicht wie es angehen soll.

also meine Idee ist wie folg:
Ich habe eine div und darunter ein keines Formular das ca. so könnte aussehen könnte:
HTML: 
<div id="ausgabe">ausgabe test</div>

<form  action="empfang.php" method="post">

<select name="test">
  <option value="gray">grau</option>
  <option value="blue">blau</option>
  <option value="orange">Orange</option>
</select>

<input type="submit" value="speichern">

</form>

nun sollte nach dem auswählen folgendes passieren ohne auf senden zu klicken sollte sich die Hintergrundfarbe des div´s ändern in die Farbe im "value".

wie kann ich das angehen?

danke schon mal für eine Idee
 
Hi,

wenn du jQuery verwendest, sollte folgender onchange-Handler im Select-Element funktionieren:
Code: 
onchange="$('#ausgabe').css({'background': (this.options[this.selectedIndex].value)});"

Ciao
Quaese
 
ok cool,

und wenn ich zwei verschiedene seceltors habe müsste ich dem Feld ja eine id geben id dann in dem ganzen auch anwenden

sprich so:
Code: 
onchange="$('#ausgabe').css({'background': (this.options[this.selected#id].value)});"

sory das ist gerade erst eingefallen. :-)
 
Hi,

wenn du zwei Select-Elemente hast, kannst du das Codefragment in beiden gleich verwenden, denn this ist eine Referenz auf das ereignisauslösende Element.

Ciao
Quaese
 
OK irgendwie verstehe ich es grad nicht.

wo ist mein problem

HTML: 
<html>

<head>
<script src="js/jquery.js" type=text/javascript></script>
<script type="text/javascript">

$(document).ready(function()
	{
		onchange="$('#vorschau').css({
                                 'background-color': (this.options[this.selected#bg].value),
                                 'color': (this.options[this.selected#text].value),
                });"
	}

</script>

</head>

<body>

<div id="ausgabe">ausgabe test</div>

<form  action="empfang.php" method="post">

<select id="bg" name="bg">
  <option value="gray">grau</option>
  <option value="blue">blau</option>
  <option value="orange">Orange</option>
</select>

<select id="text" name="text">
  <option value="#FFF">#FFF</option>
  <option value="#000">#000</option>
</select>

<input type="submit" value="speichern">

</form>

</body>

das Funtioniert irgendwie nicht
 
Hi,

du musst den onchange-Handler im Select-Element angeben.
Code: 
<select name="test" onchange="$('#ausgabe').css({'background': (this.options[this.selectedIndex].value)});">

Ciao
Quaese
 
Hi,

du kannst das Ganze auch im ready-Event von jQuery notieren:

Code: 
<script type="text/javascript">
  <!--
$(function(){
  $("#bg, #text").bind('change', function(e){
    $('#ausgabe').css({
    	'background': $('#bg').val(),
    	'color': $('#text').val()
    });
  });
});

 //-->
</script>

Sollte den gleichen Effekt haben, der HTML-Quellcode bleibt aber unberührt.

Ciao
Quaese
 
Mahlzeit Jungs,

Danke für eure Hilfe das hat mir echtsuper weiter geholfen. :)

Ich habe aber noch eine Frage kann man das auch mit einem input feld typ="text" machen?

1. ich habe ein Textfeld wo einmal der Text in einem div ("ausgabe") ausgegeben wird.
2. ich habe ein zweites Textfeld (<input typ="text">) wo nach der Eingabe der wert wieder in ein css value gewechselt werden soll.

:D


grüße und noch mal danke

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Hy, also ich habe es hin bekommen nur habe ich dafür ein neues Problem =)
hier erstmal die lösung:
Code: 
		$( colorchange );
		function colorchange(){
			var inputfeld = $( "#text_1" );
			inputfeld.change( function( objEvent ){ $('#ausgabe').css({'background': '#' + (this.value)}); }
			);
		}

ich war nun auf der suche nach einem guten "colorpicker" nur funktioniert jetzt leider nicht mehr alles so ich mir das lenke wenn ich den einen benutze funktioniert der ganze colopicker nicht mehr und wenn ich einen anderes benutze habe ich das Problem das die werte die mir Color-Picker ausgibt nicht in mein Ausgabefeld übernommen wird.

verwenden wollte ich diesen hier aber leider geht das so in der Kombination nicht.

Ich würde mich über eine Antwort freuen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück