if text in div clicked, font name of select element shoudl displayed in select, example comic sans ms
i tried html
<select id="fs"> <option value=""></option> <option value="verdana">verdana</option> <option value="impact">impact</option> <option value="comic sans ms">comic sans ms</option> </select> <br/> <div id="changeme" style='font-family:"comic sans ms"'> click here</div> with javascript
$(function() { $("#changeme").on('click', function() { $('#fs').val($(this).css("font-family")); }); }); after clicking in click here select element empty.
how fix font name comic sans ms appears in select? tried use tostring() in fiddle http://jsfiddle.net/0lce9ob9/8/
but select box still empty.
to change shown option based on css of div (rather other way around, understood previously) use following:
$("#changeme").on('click', function() { var font = $(this).css("font-family"); $('#fs option[value=' + font + ']').prop("selected", true); }); simply changing value of select element won't accomplish want: need explicitly modify option want shown. option elements value of comic sans ms, use:
$("option[value='comic sans ms']") also, note when write id attribute in html, not include hash # mark. that's when selecting element in css. finally, whenever you're using font-family name contains spaces, must wrap in quotes. <div> should this:
<div id="changeme" style='font-family:"comic sans ms"'>click here</div> here's snippet:
$("#changeme").on('click', function() { var font = $(this).css("font-family"); $('#fs option[value=' + font + ']').prop("selected", true); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="fs"> <option value=""></option> <option value="verdana">verdana</option> <option value="impact">impact</option> <option value="comic sans ms">comic sans ms</option> </select> <br/> <div id="changeme" style='font-family:"comic sans ms"'> click here</div>
Comments
Post a Comment