Afisare culoare si link in functie de Select

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
alexinio3d
Mesaje:96

Afisare culoare si link in functie de Select

Salutare.
Am un cod de mai multe bannere si as dori sa fac cumva sa mi se faca udate la link si la banere cand imi aleg stilu .
Exemplu am urmatorul cod:

Cod: Selectaţi tot

<select name="culoare">
            <option>Alegeti</option>
            <option value="rosu">Rosu</option>
            <option value="negru">Negru</option>
            <option value="galben">Galben</option>
            <option value="albastru">Albastru</option>
            </select>
As dori ca atunci cand alege de exemplu culoarea galben sa nu mai trebuiasca sa dea trimite sau ceva care sa dea refrash/sa trimita pe alta pagina in care sa scrie rezultatul :) , vreau direct sami arate mai jos imaginea cu culoarea galbena si un link spre imagine.
Sper ca ma inteles cineva ce doresc :) .
Va multumesc .
Siteuri create / configurate de mine :
SilvoProject.Ro ( Magazin Online ) : SilvoProject.Ro
TreiSute.Ro ( Comunitate de gaming ) : TreiSute.Ro
steell Mesaje:190
Uite aici exemplu:
api.jquery.com/change/
MarPlo Mesaje:4343
Daca stii JavaScript (daca nu, poti invata din Cursul de pe site) poti crea un obiect JS cu acele culori si link-ul asociat fiecaruia, cam asa:

Cod: Selectaţi tot

var culori = {
  'rosu': 'link pt. rosu',
  'galben': 'link pt. galben',
  // ... etc.
};
Apoi adaugi la acel element <select> un eveniment "onchange" care sa preia valoarea din optiunea selectata, iar cu aceasta valoare preia link-ul asociat din obiectul "culori".

Cod: Selectaţi tot

var culori = {
  'rosu': 'link pt. rosu',
  'galben': 'link pt. galben',
  // ... etc.
};

function getColorLink(color) {
  var lnk = culori[color];     // preia link-ul asociat culorii

  // se adauga inttr-un <div>, cu getElementById() si innerHTML, culoarea, link-ul, dupa cum le vrei
}
- Evenimentul "onchange" sa apeleze functia getColorLink() cu valoarea selectata, cam asa daca e adaugat in tag: onchange="getColorLink(this.value);" .
alexinio3d Mesaje:96
Am incercat acest cod care mi la dat steell, dar nustiu cum sa fac sami arete si o imagine si sub imagine un cod html cu linkul :

Cod: Selectaţi tot

<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<select name="sweets">
<option>rosu</option>
<option>negru</option>
<option>albastru</option>
<option>galben</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += "<img src=\"http://localhost/banner/" + $(this).text() + ".png\" />";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>
Siteuri create / configurate de mine :
SilvoProject.Ro ( Magazin Online ) : SilvoProject.Ro
TreiSute.Ro ( Comunitate de gaming ) : TreiSute.Ro
MarPlo Mesaje:4343
Vezi codul acesta. Modifica ce e de modifica pt. ceea ce vrei sa faci.

Cod: Selectaţi tot

<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<select id="sweets" name="sweets">
<option value="rosu">rosu</option>
<option value="negru">negru</option>
<option value="albastru">albastru</option>
<option value="galben">galben</option>
</select>
<div id="culoare"></div>
<script>
var culori = {
  'rosu': 'link_pt_rosu',
  'galben': 'link_pt_galben',
  'negru': 'link_pt_negru',
  'albastru': 'link_pt_albastru'
};
$("#sweets").change(function () {
  var color = $(this).val();
  var str = '<img src="http://localhost/banner/' + color + '.png" alt="'+ color +'" /><br/><a href="'+ culori[color] +'" title="'+ color +'">'+ culori[color] +'</a>';
  $("#culoare").html(str);
});
</script>
</body>
</html>

Subiecte similare