Semantic-ui: Add option to dropdown and selected this

Created on 6 Feb 2015  路  5Comments  路  Source: Semantic-Org/Semantic-UI

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

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'} });

All 5 comments

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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Morrolan picture Morrolan  路  3Comments

arj-196 picture arj-196  路  3Comments

playgithub picture playgithub  路  3Comments

iPaoo picture iPaoo  路  3Comments

mllamazares picture mllamazares  路  3Comments