Changing Image Based On Selection In 2 Dropdowns
Solution 1:
You need to write a function which is called on the change event of both select elements which concatenates the image filename and updates the src property of the required img, something like this:
$('select.form-control').change(function() {
var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
$('#imgToChange').prop('src', filename);
});
Solution 2:
You can use this to get the combined value of dropdowns in the format like a-2,a-3,b-1 etc.
document.getElementById("shape").value + "-" + document.getElementById("waist").valueSolution 3:
you can use the below plunker as well.
https://plnkr.co/edit/1P12J0Ahl2S1m6aJ1rD0?p=preview
<selectclass="form-control"id="shape"name="shape"><optionvalue=""></option><optionvalue="a">a</option><optionvalue="b">b</option><optionvalue="c">c</option><optionvalue="d">d</option><optionvalue="e">e</option><optionvalue="f">f</option></select><selectclass="form-control"id="waist"name="waist"><optionvalue=""></option><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option></select><buttononClick="test()">Proceed</button>in script.
var test = function(){
if($("#shape").val() != "" && $("#waist").val() != "")
{
alert("Update");
}
else
{
alert("select both the option");
}
};
here each select box has the default blank option and if user try to proceed then the value is checked and appropriate message is displayed.
Solution 4:
You can use a solution with jQuery (javascript) / PHP / AJAX (and don't worry, AJAX is easy). It will work like this:
jQuery - detect when both SELECT controls have been changed,
AJAX - a jQuery block that sends data to a back-end PHP file,
PHP - Receives AJAXed data and identifies the correct image (e.g. from MySQL) then builds HTML code and ECHOs it back to jQuery side,
AJAX - Receives PHP data via AJAX,
jQuery - Inside the AJAX success function, uses the ,html() method to insert the new HTML into the DOM
That's the overview. Here's how it will look code-wise:
HTML:
<selectclass="form-control"id="shape"name="shape"><optionvalue="">Options go here</option></select><selectclass="form-control"id="waist"name="waist"><optionvalue="">Options go here</option></select><divid="someDIV"> //DIV that will receive IMG tag </div>jQuery:
var chg = false;
$('#shape, #waist').change(function(){
if (!chg){
chg=true;
}else{
var myimg = $('#shape').val() + $('#waist').val();
$.ajax({
type: 'post',
url: 'my_second_php_file.php',
data: 'myimg=' +myimg,
success: function(d){
//if (d.length) alert(d);
$('#someDIV').html(d);
}
}); //END AJAX
}//end else
}); //END select.changePHP:
<?php$img = $_POST['myimg'];
//echo ($img); die();//$result = Do your MySQL lookup here$out = '
<img src="' .$result['img']. '" class="yourImage" />
';
echo$out;
?>Here is a jsFiddle DEMO that approximates how it will work. jsFiddle cannot do AJAX, so the AJAX routine is replaced by something that will demonstrate how it will look, rather than a true working example.
Here are some simple demos of AJAX code and a brief explanation -- copy them to your own system and experiment. Really quite simple, and xtreme useful.
Post a Comment for "Changing Image Based On Selection In 2 Dropdowns"