Pagina 1 din 1
Afisare culoare si link in functie de Select
Scris: Vin Iun 21, 2013
de alexinio3d
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 .
Afisare culoare si link in functie de Select
Scris: Vin Iun 21, 2013
de steell
Uite aici exemplu:
api.jquery.com/change/
Afisare culoare si link in functie de Select
Scris: Sâm Iun 22, 2013
de MarPlo
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);" .
Afisare culoare si link in functie de Select
Scris: Sâm Iun 22, 2013
de alexinio3d
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>
Afisare culoare si link in functie de Select
Scris: Sâm Iun 22, 2013
de MarPlo
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>