Dynamic Dropdown Using Semantic Ui

Got a problem with semantic-ui dropdown. I've been using Semantic-Ui, and wanted to change the dropdown item dynamically. That is, when i choose the value from the first dropdown,

Solution 1:

Syntax Errors

You are making line breaks inside your strings, break the lines properly with a + operator and your script won't find a syntax error, thus your code should run.

Second Dropdown

About the second dropdown. you're missing something. Look at the first dropdown DOM structure. the parent element #programmetype has the classes ui selection dropdown select-language for the CSS to get applied.

But for your #servicetype, you don't have those classes and you never added them, so in the onChange of your first dropdown, add these classes, (check the script)

Also, you need a hidden input to hold the data which you missed. But it's there for the first dropdown. Check the snippet, I've added them.

Hope this helps.

Check the snippet bellow:

$(document).ready(function() {
  $("#programmetype").dropdown({
    onChange: function() {

      $('#servicetype').addClass('ui selection dropdown select-language'); // add these classes for the UI.
      $('#servicetype').html(
        '<input type="hidden" name="servicetype">'// you need a hidden input and the rest is fine
        +'<div class="text">Choose..</div>'
        +'<i class="dropdown icon "></i>'
        +'<div class="menu">'
        +'<div class="item" data-value="acp">ACP</div>'
        +'<div class="item" data-value="art"> ART</div>'
        +'</div>'
        +'</div>'
      );
      $('#servicetype').dropdown();
    }

  });
});

<scriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"crossorigin="anonymous"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><scriptsrc="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><divid="programmetype"class="ui selection dropdown select-language"><inputtype="hidden"name="programmetype"><divclass="text">Choose..</div><iclass="dropdown icon"></i><divclass="menu"><divclass="item"data-value="val1">Car</div><divclass="item"data-value="val2">Tank</div><divclass="item"data-value="val3">Plane</div></div></div><divid="servicetype"></div>