I'm trying to use the msDropdown JavaScript plugin (https://github.com/marghoobsuleman/ms-Dropdown) to create html tags that include images.
It seems to work good except for if I try to change the selected value using JavaScript. Like in this jsFiddle: https://jsfiddle.net/cmu845eh/7/ I'm trying to make it so that if you call the setValue() function, it will change the selected value to a certain index.
I've tried multiple different solutions online but none work, solutions such as this:
var oHandler = $("#main").msDropDown().data("dd");
oHandler.set("length", 0);
always result in an error, and more basic jquery approaches dont work either.
Can someone help me change the value of my select tag to a certain index using javascript?
Using msdropdown
Let me give you a full code on how to populate select dropdown from server-side using another select dropdown.
1st Select Dropdown
<select name="" id="from" class="selectFlags" style="width:100%;">
<option value="2" title="https://fxtop.com/ico/aon.gif">GBP</option>
<option value="3" title="https://fxtop.com/ico/aon.gif">GBP</option>
</select>
2nd Select Dropdown
<select name="" id="selectFlagTo" class="selectFlagTo form-control" style="width:100%;height:52px;">
</select>
JScript
<script language="javascript">
$(document).ready(function(e) {
try {
$(".selectFlags").msDropDown({mainCSS:'dd'});
} catch(e) {
alert(e.message);
}
$(".dd").css({ 'width' : '100%' });
});
$(document).on("click",".dd .ddChild",function(e){
let $from=$("#from option:selected").val();
let $to=$("#selectFlagTo");
$to=$to.empty();
$(".dd").css({ 'width' : '100%' });
$(".dd2").css({ 'width' : '100%' });
$.ajax({
url: "http://odin.test/load_countries",
type: "POST",
data: {from:$from},
success: function(response) {
$.each(response, function(key, entry) {
$to.append("<option title='https://fxtop.com/ico/aon.gif' value='"+entry.id+"'>"+entry.name+"</option>" );
});
var oDropdown = $(".selectFlagTo").msDropDown({mainCSS:'dd2'});
$(".dd3").css({ 'width' : '100%' });
}
});
});
</script>
Enjoy coding!!!
Solved it here by fixing how I was initializing the msdropdown element after the html was created. https://jsfiddle.net/uvbjhy31/