使用 jQuery 重置选择框值

Posted 2023-03-13

【中文标题】使用 jQuery 重置选择框值

【英文标题】：Reset Select box values using jQuery

【发布时间】：2013-08-10 05:45:15

【问题描述】：

我有三个选择框。当我选择第一个选择框时，它会使用 jQuery 和 AJAX（来自数据库的值）自动加载第二个和第三个选择框的选项。

但是当我更改第二个选择框的选项时，它应该根据第二个选择框选项列出第三个选择框值。但是现在我根据第一个选项获得第三个选择框选项。

$(document).ready(function()

  $("#cat").change(function()
  
    var pc_id = $(this).val();
    if(pc_id != '')  
     
      $.ajax
      (
         type: "POST",
         url: "load_sub_cats.php",
         data: "catid="+ pc_id,
         success: function(option)
         
           $("#subcat").html(option);
         
      );
     
     else
     
       $("#subcat").html("<option value=''>-- No category selected --</option>");
     
 if(pc_id != '')  
          
           $.ajax
           (
              type: "POST",
              url: "load_qset.php",
              data: "catid="+ pc_id,
              success: function(option)
              
                $("#questionset").html(option);
              
           );
          
          else
          
            $("#questionset").html("<option value=''>-- No question set selected--</option>");
          
    return false;
  );

$("#subcat").change(function()
      

        var pc_id = $(this).val();

        //$("#questionset").html("<option value=''>-- Select Question set --</option>");
    $("#questionset").empty();
     if(pc_id != '')  
                      
                       $.ajax
                       (
                          type: "POST",
                          url: "load_subcat_qset.php",
                          data: "subcatid="+ pc_id,
                          success: function(option)
                          
                            $("#questionset").html(option);
                          
                       );
                      
                      else
                      
                        $("#questionset").html("<option value=''>-- No question set selected --</option>");
                      
        return false;
      );
    );`

我使用了 empty() 来清空选择框。但它不会重置值。

【参考方案1】：

不要使用empty()，试试这样的：

$('#questionset')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

详情请见this post

【讨论】：

感谢您的回复。我已经使用Ajax重置值。我可以使用附加的ajax值

可以，只要ajax值是你想要的html即可。

remove() and empty 删除选项但不追加新选项

嗯...也许从您的 ajax 结果中创建一个全新的 html 选择器并隐藏/删除旧的 html 选择器而不是尝试重新分配它的内容会更容易？