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

8 浏览
0 Comments

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

整天我都在尝试解决这个问题，看起来很简单，但是有什么办法可以一次性清除（而不是删除）一组下拉选择框中的所有选择？我希望它们被设置回初始加载时的默认状态。我不能使用.reset，因为表单中还有其他需要收集的信息，但是我需要允许用户更改主意而没有任何惩罚（不需要重新填写表单）。

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

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

而这个jQuery bug记录似乎暗示可以使用.empty()来实现，但是也不起作用。

这个SO问题列出了一堆实现我想要的功能的不同方法，我已经尝试了所有方法（参见下面的代码），但都没有成功。显然我漏掉了什么。

这里有一个包含该问题的JSFiddle。

在JSFiddle中如何查看问题：

在"Repair Status"下，点击"Repaired"；会显示两个新的输入框，一个是一组单选按钮，然后是每个选项的下拉选择框。在"Category"下，选择"Part Quality"，然后从下拉列表中选择任何一项。该选择现在应该显示在下拉列表中。现在点击任何其他的Category，然后再回到"Part Quality"。之前所做的选择仍然显示，而不是默认的"Select Part Quality Reason"，这是我想要的。

我的尝试主要集中在"Part Quality"单选按钮上，以证明概念，但实际代码需要清除表单中除了"Reporting Department"下拉选择框之外的所有选项。最好可以使用一个通用的选择器，如$(this)，但这不是必需的。类似这样：

$("select option:selected").each(function () {
    $(this).val('');  //不起作用
});

要求：

当用户选择不同的单选按钮（"Category"）时，所有的下拉选择框将被重置为默认状态。这样，当用户做出最终选择并点击提交时，就不会有多余的条目。当他们改变"Category"的选择时，底层代码必须保留"Reporting Department"的选择。

然后，我可以收集他们的所有选择，并将它们放入一个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([]);
    });
});

0

3 答案

0 Comments

问题出现的原因是因为用户想要清除所有的选项选择，但是使用的代码却只清除了单选按钮或者下拉菜单的选项。解决方法是修改代码，使其能够清除所有的选项选择。

修改后的代码如下：

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

以上代码会清除所有的单选按钮和下拉菜单的选项选择。

0
0 Comments

因为你正在使用jquery mobile，所以你需要发出一个刷新命令来改变元素。

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

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

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

$(<radio-button-selector>).checkboxradio("refresh");

0
0 Comments

问题的出现的原因是代码中存在错误的语法和使用了不适用于jQuery Mobile的方法，导致无法清除下拉选择的选项。解决方法是对代码进行修正和添加必要的刷新操作。

首先，代码中使用了错误的语法来清除下拉选择的选项，正确的方法是使用val("")来清除选项，示例代码如下：

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

其次，代码中存在一行不正确的代码，未在元素ID前面加上#，这是jQuery所要求的。而且这行代码本身也是无效的，可以直接忽略。修正后的代码如下：

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

最后，由于使用了jQuery Mobile，需要在清除选项后进行刷新操作。这可以通过调用refresh()方法来实现，示例代码如下：

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

通过以上的修正和添加刷新操作，可以解决清除下拉选择选项的问题。

0