Semantic UI dropdown multi-select removes value on refresh

semantic ui dropdown set selected
semantic ui react dropdown
semantic-ui dropdown onchange
semantic-ui nested dropdown
semantic-ui react dropdown multiple
multiselect dropdown bootstrap
multi select dropdown with checkbox
semantic ui dropdown not working

I'm using ajax to bind partial view in a div#demo and initiating dropdown on ajaxstop.

After submitting the details, ajax loads partial view again to refresh the table section, and then re-initiating dropdown on ajaxstop.

this works fine for single selection dropdown, but multi-select dropdown reset the selected value.

I don't want multi-select dropdown to reset it's value.

// partial views

var viewA = `
<select class="ui dropdown">
  <option value="">Select Single Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="ui dropdown" Multiple>
  <option value="">Select Multiple Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" class="ui button primary">Submit</button>
`

var viewB = `<table class="ui celled table unstackable">
  <thead>
    <tr><th>Name</th>
    <th>Age</th>
    <th>Job</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jill</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
  </tbody>
</table>`


$(document).ajaxStop(function() {
  $(".dropdown").dropdown({
    useLabels: false,
  });
});


function bindViewA() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewA").html(viewA);
}

function bindViewB() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewB").html(viewB);
}

$(document).on('click', 'button', () => {
  bindViewB();
});


bindViewA();
bindViewB();
#demo {
  padding: 30px;
}

#viewA {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<div id="demo">
  <div id="viewA"></div>
  <div id="viewB"></div>
</div>

You can set drop down without initilize with setting like below

$(".dropdown").dropdown('setting', {
    useLabels: false,`
})'

// partial views

var viewA = `
<select class="ui dropdown">
  <option value="">Select Single Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="ui dropdown" Multiple>
  <option value="">Select Multiple Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" class="ui button primary">Submit</button>
`

var viewB = `<table class="ui celled table unstackable">
  <thead>
    <tr><th>Name</th>
    <th>Age</th>
    <th>Job</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jill</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
  </tbody>
</table>`




$(document).ajaxStop(function() {
  $(".dropdown").dropdown('setting', {
    useLabels: false,
    forceSelection: false,
    sortSelect: true,
    //clearable: true,
    fullTextSearch: true,
    onHide: function() {
      //cleanDdlOnHide(this);
    }
  });
});

function bindViewA() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewA").html(viewA);
}

function bindViewB() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewB").html(viewB);
}

$(document).on('click', 'button', () => {
  bindViewB();
});


bindViewA();
bindViewB();
#demo {
  padding: 30px;
}

#viewA {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<div id="demo">
  <div id="viewA"></div>
  <div id="viewB"></div>
</div>

Dropdown multi-select removes value on refreash � Issue #6913 , After submitting the details, ajax loads partial view again to refresh the table section, and then and re-initiating dropdown on Semantic-Org / Semantic-UI Dropdown multi-select removes value on refreash #6913 As i also posted on SO, it should be fixed in the community fork https://fomantic-ui.com Changes dropdown to use new values: refresh: Refreshes all cached selectors and data: toggle: Toggles current visibility of dropdown: show: Shows dropdown: hide: Hides dropdown: clear: Clears dropdown of selection: hide others: Hides all other dropdowns that is not current dropdown: restore defaults: Restores dropdown text and value to its

This seems to be fixed in the community fork https://fomantic-ui.com

So try to change the css + js accordingly

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.js"></script>

I prepared a working jsfiddle using your code here https://jsfiddle.net/sezL041k/

Dropdown, A dropdown allows a user to select a value from a series of options. Multiple Search Selection. A selection dropdown can allow multiple search selections. After submitting the details, ajax loads partial view again to refresh the table section, and then re-initiating dropdown on ajaxstop. this works fine for single selection dropdown, but multi-select dropdown reset the selected value. I don't want multi-select dropdown to reset it's value.

I have not found the expected behavior of the dropdown function in semantic. However, you can make do with a little patch on the ajaxStop function:

$(document).ajaxStop(function() {
  var psel = [];
  $(".dropdown [multiple]").each(function(){
    psel.push($(this).val());
  });
  $(".dropdown").dropdown({
    useLabels: false
  });
  $(".dropdown [multiple]").each(function(){
    $(this).val(psel[0]).trigger('change');
    psel.shift();
  });
});

This should work even if there are several multiple dropdowns, as long as they are always selected by jquery in the same order. If not, you can always make psel a hash and give each multiple selector an id.

Dropdown, You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder. Semantic UI React 1.1.1. GitHub A dropdown allows a user to select a value from a series of options. Using the clearable setting will let users remove their

Semantic UI & Angular Create & Control Semantic , A dropdown allows a user to select a value from a series of options. Multiple Search Selection. A selection dropdown can allow multiple search selections. bower install semantic-ui-dropdown To install with NPM npm install semantic-ui-dropdown To install with Meteor meteor add semantic:ui-dropdown Addendum. This element's definitions (required class names, html structures) are available in the UI Docs. Please consider checking out all the benefits to theming before using these stand-alone releases.

semantic ui dropdown - JSFiddle, Checkbox & Radio Button, Examples Directives, sm-checkbox sm-checkbox-bind sm-checkbox-toggle sm-checkbox-check sm-checkbox-uncheck� A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.

Semantic ui dropdown default value, <input type="button" id="clearValues" value="Clear Values" />. 3. . 4. <div class ="ui fluid selection search dropdown multiple">. 5. <input name="tags"� Semantic UI React 1.1.1. GitHub Accordion Checkbox Dimmer Embed Dropdown Modal Progress Popup Rating Sidebar Sticky Search Tab Transition. Behaviors. Visibility

Comments
  • It seems to me like a bug.
  • can you try $(document).ajaxStop(function() { $(".dropdown").dropdown('setting', 'useLabels', false); });
  • @Maramal Yeah it seems bug, but can't find any solution
  • @AbhishekPandey MIght be you are looking for ` $(".dropdown").dropdown('setting', 'useLabels', false);`
  • @yogendarji I saw your solution, I'm using few more parameters with 'useLabels', false, lemme try your solution into my project.
  • I'm using semantic in a huge application, I'm afraid of chain failure after replacing this with existing plugin.
  • I have already tried this with set selected method of semantic ui, the problem is that ddl clears on any ajax call that happens on page, and I have more than 150 partial views in my project.