通过单击单选按钮清除所有选项选择条目

Clear all option select entries by clicking radio button

本文关键字：选项 选择 单击 单选按钮 清除      更新时间：2023-09-26

我一直在努力解决这个问题，这似乎很简单，但是我如何一次清除（而不是删除）一组选择选项下拉列表中的所有选择？ 我希望它们在首次加载div 时设置回默认状态。 我不能使用 .reset ，因为我需要收集的表单中还有其他信息，但我需要允许用户改变主意而不会受到惩罚（必须重新填写表单）。

这个SO问题向您展示了如何删除我不需要的选项。

这个SO问题似乎给出了答案，但我无法让它工作。

这个jQuery错误条目似乎暗示它可以用.empty（）来完成，但这也不起作用。

这个SO问题列出了一堆不同的方法来做我想做的事情，我已经尝试了所有这些方法（见下面的代码），但没有一种奏效。 我显然错过了一些东西。

这是解决问题的 JSfiddle。

如何在小提琴中查看问题：

在"修复状态"中，单击"已修复";将显示两个新输入，一组单选按钮，然后为每个按钮选择选项下拉列表。 在"类别"下，选择"零件质量"，然后从下拉列表中选择任何项目。 该选择现在应显示在下拉列表中。 现在单击其他类别中的任何一个，然后返回零件质量。 您刚刚所做的相同选择仍将显示，而不是默认的"选择零件质量原因"，这是我想要的。

我的尝试主要集中在用于概念验证的"零件质量"单选按钮上，但生产代码需要清除表单中除"报告部门"下拉列表之外的所有选项选择中的所有条目。 最好我可以使用具有$(this)构造的泛型选择，但这不是必需的。 像这样：

$("select option:selected").each(function () {
    $(this).val('');  //doesn't work
});

要求：

当用户选择其他单选按钮（类别）时，所有选项选择下拉列表都将重置为其默认状态。 这样，当用户做出最终选择并点击提交时，就没有多余的条目。 当他们更改其"类别"选择时，基础代码必须保留"报告部门"下拉选项。

然后，我可以收集他们选择的所有零碎信息，以放入 JSON 字符串中，以便对我的代码隐藏进行 AJAX 调用，并将数据插入 MySQL 数据库。

我不在乎答案是使用 jQuery 还是普通的 JavaScript，我可以愉快地使用其中之一。

这里有一堆尚未解决的尝试：

    $("#formEvent_repair input[type='radio']").on('change', function () {
    //$("#select_part_quality_repair option:selected").attr("selected", false);
    //$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
    //$('#select_part_quality_repair').attr('selectedIndex', '-1'); 
    //$('#select_part_quality_repair').val(null);
    $("#select_part_quality_repair").find('option:first').attr('selected','selected');
    //$("select option:selected").val([]);
    //$("select option:selected").html('');
    //$("select_part_quality_repair").html('');
    $("select_part_quality_repair").append().html('');
    $("select option:selected").each(function () {
        console.log("Emptying select options");
        $("#select_part_quality_repair").find('option:first').attr('selected','selected');
        //#select_part_quality_repair-button > span
        //$("#select_part_quality_repair").prop('selectedIndex', -1);
        //$("#select_part_quality_repair").find('option').attr("selected", false);
        //$("#select_part_quality_repair option").attr("selected", false);
        $("#select_part_quality_repair option:selected").attr("selected", false);
        console.log(this);
        $(this).val([]);
    });

因为您使用的是 jquery mobile，所以您需要向您更改的 elemnt 发出刷新命令。

$('#select_part_quality_repair').val('').selectmenu('refresh');

这将取消选择任何选项，然后刷新布局以显示更改。

对于在代码中使用中设置的单选按钮 

$(<radio-button-selector>).checkboxradio("refresh");
清除如下所示

的下拉选择：

$("#select_part_quality_repair").val("");

这将清除选择而不删除成员。

此外，代码中的这一行格式不正确：

$("select_part_quality_repair").append().html('');

您忘记在元素 ID 之前放置"#"，这是 JQuery 所要求的。无论如何，这条线对您没有帮助，因此您甚至不应该为此烦恼。

干杯

-=卡梅隆

取消选中所有单选按钮

$(".clear").click(function(){
    $('input:radio').each(function () {
        $(this).removeAttr("checked");
    });
});

编辑 2 ：

未选择所有选项

$(".clear").click(function(){
    $('select').each(function () {
        $(this).removeAttr("selected");
    });
});
相关文章：