Hello,
I try to add an option manually by javascript into my dropdown, but i can't refresh this with my new item, the dropdown doesn't change, but if i inspect the dropdown the select tag contains my new item :
HTML :
<div class="ui form">
<div class="field">
<select id="priorite" name="priorite" class="required ui dropdown">
<?php echo PriorityHelper::getInstance()->getPriorityDropdown(); // return one option ?>
</select>
<input name="priorite" type="hidden">
</div>
</div>
JS :
$('#priorite').dropdown();
// option = <option value="1">test</option>
$('#priorite').empty().append(option);
$('#priorite').parent().data().moduleDropdown.refresh(); // or activate()
Inpected HTML code :
<div class="ui form">
<div class="field">
<div class="required ui dropdown selection" tabindex="0" aria-required="true">
<select id="priorite" name="priorite">
<option value="1">test</option>
</select>
<i class="dropdown icon"></i>
<div class="text"></div>
<div class="menu transition hidden" tabindex="-1" style="">
<div class="item active selected" data-value="3">
Middle
</div>
</div>
</div>
<input type="hidden" name="priorite"></input>
</div>
What is the problem with my code ? :sunny:
Best regards
In fact, i don't use the select template ^^'
-> Closed !
You can also call behaviors directly without querying for module data
$('#priorite').dropdown('refresh');
I am wondering why we cannot add options to dropdown with something like :
$('#mydropdown').dropdown( {data: {'name': 'option1', text': 'option1', 'value':'1'}});
or
$('#mydropdown').dropdown( 'add options', {
{'name': 'option1', text': 'option1', 'value':'1'},
{'name': 'option2', text': 'option2', 'value':'2'}
});
I got prematurely excited thinking @pencilcheck was demonstrating hidden functionality as this is exactly what I'm looking to do. I've got a page where the same dropdown appears 100 times and I'm trying to find a way to initialise the dropdowns on-demand or at least not have a ton of unnecessarily redundant HTML on my page. Funnily enough, using the remote data loading may be the best way for me...
Would really be awesome if there was a way to add/set options via javascript other than doing an api call. Is there even any way to execute the api call such that it is not done every time the user changes the input in the search field of the dropdown?
Most helpful comment
I am wondering why we cannot add options to dropdown with something like :
$('#mydropdown').dropdown( {data: {'name': 'option1', text': 'option1', 'value':'1'}});or
$('#mydropdown').dropdown( 'add options', { {'name': 'option1', text': 'option1', 'value':'1'}, {'name': 'option2', text': 'option2', 'value':'2'} });