根据第一个下拉值清除第二个下拉值

Question

当我选择1st Dropdown时，我需要清除2nd Dropdown。

我曾经使用过.empty()方法但是如果我稍后使用这种方法，我没有得到第二个下拉值。

我尝试过以下方法：

     $("#taskcategorylist").change(function () {
        console.log("Task Category Changed");
        $('#tasktypes').val("");
     });

第一个下拉Html代码：

   <div class="field">
       <b>Task Category</b>
       <div class="ui selection dropdown"> 
       <i class="dropdown icon"></i>
       <div class="default text">Select</div>
       <div class="menu" id="taskcategorylist"></div>
      </div>
    </div> 

第二个下拉Html代码：

 <div class="field">
   <b>Task Type</b>
   <div class="ui selection dropdown">
   <i class="dropdown icon"></i>
   <div class="default text">Select</div>
   <div class="menu" id="tasktypes"></div>
  </div>
</div> 

第一个下拉列表Jquery代码：

 $.get(window.routemap + "api/task/taskcategory", function (data) {
        self.taskcategorylist = JSON.parse(data.Data).Lookup;
        self.taskcategorylist.forEach(function (item) {
            $('#taskcategorylist').append("<div  class='item' data-value='" + 
            item.category_id + "'> " + item.category_name + "</div >");
        });
    });

第二个下拉列表Jquery代码：

$.get(window.routemap + "api/firm/tasktypes", function (data) {
        self.tasktypes = JSON.parse(data.Data).Lookup;
        self.tasktypes.forEach(function (data) {
            $('#tasktypes').append("<div class='item' data-value='" + 
            data.tasktype_id + "'> " + data.task_name + "</div >");
        });
    });

Answer 1

试试这个代码。

$("#taskcategorylist").change(function () {
    console.log("Task Category Changed");

    $('#tasktypes').parents(".ui.dropdown").dropdown('clear');
});