Currently I have some code that when selecting a value from a dropdown list will paint a specific path of a svg image.
var paths1 = {
"https://www.google.com": {
color: "#eb8c00",
selector: "#path1"
},
"https://www.yahoo.com": {
color: "#eb8c00",
selector: "#path2"
},
}
$('#path').on("change", function() {
$('#path1, #path2').css({
fill: "#FFFFFF"
});
var value = $(this).val()
if (!value) {
return;
}
var {
color,
selector
} = paths1[value]
$(selector).css({
fill: color
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="svg">
<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="500px" height="500px"
viewBox="0 0 500 500"
enable-background="new 0 0 500 500"
xml:space="preserve">
<path id="path1"
fill="#FFFFFF"
stroke="#231F20"
stroke-miterlimit="10"
d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0 C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2"
fill="#FFFFFF"
stroke="#231F20"
stroke-miterlimit="10"
d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309 c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
</svg>
</div>
<select id="path" name="path" >
<option value="">Select Path</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
<div>
<input
type="button"
value="Select"
onClick="window.open(path.value,'newtab' path.value)">
</div>
It works fine, as the button will also redirect to a different page.Now I need to be able to the reverse. I want to click on a path and the dropdown selector will also change. Clicking on path1 will select Google and clicking on path2 will select Yahoo from my dropdown list.
How can I achieve this?
CodePudding user response:
To achieve this, you could define a click event handler:
$('#Layer_1 path').on("click", function() {...});
and use a for in
loop to compare the selector
values in the paths1
array with the ID of the clicked path:
for (key in paths1) {
if (paths1[key].selector == '#' this.id) {...}
}
If you found a match, you can use the key
to select the option
tag and assign the selected
property to it:
$('option[value="' key '"]').prop('selected', true);
All together:
$('#Layer_1 path').on("click", function() {
for (key in paths1) {
if (paths1[key].selector == '#' this.id) {
$('option[value="' key '"]').prop('selected', true);
}
}
});
You could also change the colors similar to the other event handler:
$('#Layer_1 path').on("click", function() {
for (key in paths1) {
if (paths1[key].selector == '#' this.id) {
$('option[value="' key '"]').prop('selected', true);
$('#path1, #path2').css({
fill: "#FFFFFF"
});
$(this).css({fill: paths1[key].color});
}
}
});
Working example:
var paths1 = {
"https://www.google.com": {
color: "#eb8c00",
selector: "#path1"
},
"https://www.yahoo.com": {
color: "#eb8c00",
selector: "#path2"
},
}
$('#path').on("change", function() {
$('#path1, #path2').css({
fill: "#FFFFFF"
});
var value = $(this).val()
if (!value) {
return;
}
var {
color,
selector
} = paths1[value]
$(selector).css({
fill: color
});
});
$('#Layer_1 path').on("click", function() {
for (key in paths1) {
if (paths1[key].selector == '#' this.id) {
$('option[value="' key '"]').prop('selected', true);
$('#path1, #path2').css({
fill: "#FFFFFF"
});
$(this).css({fill: paths1[key].color});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="svg">
<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="500px" height="500px"
viewBox="0 0 500 500"
enable-background="new 0 0 500 500"
xml:space="preserve">
<path id="path1"
fill="#FFFFFF"
stroke="#231F20"
stroke-miterlimit="10"
d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0 C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2"
fill="#FFFFFF"
stroke="#231F20"
stroke-miterlimit="10"
d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309 c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
</svg>
</div>
<select id="path" name="path" >
<option value="">Select Path</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
<div>
<input
type="button"
value="Select"
onClick="window.open(path.value,'newtab' path.value)">
</div>
CodePudding user response:
here is a code that you can check out as an example. It must help. Good luck.
function SelectADropdownItem(id, val) {
var d = document.getElementById(id);
for (var i = 0; i < d.length; i ) {
if (d[i].value == val) {
d[i].selected = true;
} else {
d[i].selected = false;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img
onclick="SelectADropdownItem('design-dropdown','Fleur')"
src="//www.willmaster.com/library/images/ImageClickSelects/flower.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Flower design"
/>
<img
onclick="SelectADropdownItem('design-dropdown','Nine Patch')"
src="//www.willmaster.com/library/images/ImageClickSelects/ninepatch.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Nine patch design"
/>
<img
onclick="SelectADropdownItem('design-dropdown','Pink Gate')"
src="//www.willmaster.com/library/images/ImageClickSelects/pinkgate.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Pink gate design"
/>
<br />
<img
onclick="SelectADropdownItem('design-dropdown','Sand Dollar')"
src="//www.willmaster.com/library/images/ImageClickSelects/sanddollar.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Sand dollar design"
/>
<img
onclick="SelectADropdownItem('design-dropdown','Sandria')"
src="//www.willmaster.com/library/images/ImageClickSelects/sandria.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Sandria design"
/>
<img
onclick="SelectADropdownItem('design-dropdown','Blue Wheel')"
src="//www.willmaster.com/library/images/ImageClickSelects/wheel.jpg"
style="
border: none;
height: 120px;
width: 94px;
cursor: pointer;
margin: 0 5px 0 5px;
"
alt="Blue wheel design"
/>
<select id="design-dropdown">
<option>Select here or click a pattern above.</option>
<option value="Fleur">Fleur</option>
<option value="Nine Patch">Nine Patch</option>
<option value="Pink Gate">Pink Gate</option>
<option value="Sand Dollar">Sand Dollar</option>
<option value="Sandria">Sandria</option>
<option value="Blue Wheel">Blue Wheel</option>
</select>
</body>
</html>