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

时间:2019-03-27 06:06:44

标签: javascript jquery html css semantic-ui

选择“第一个下拉菜单”时,我需要清除“第二个下拉菜单”。

我曾经使用过.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 >");
        });
    });

1 个答案:

答案 0 :(得分:2)

尝试此代码。

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

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