如何通过JavaScript更改选择框时触发新功能？

我有2个选择框称为“primaryTag”和“primaryCategory”如何通过JavaScript更改选择框时触发新功能？

primaryCategory取决于primaryTag

也有2名为“标签”和“分类”多选选项。

当'主标签'改变时，'标签'应该被取消选择。

当'primaryCategory'更改时，'categories'多选选项应该被取消选择。 即使'primaryCategory'在primaryTags上的更改事件后发生更改，'categories'多选应该被重置。

我有以下代码：

$('document').ready(function(){ 
    $("#primaryTag").change(function() { 
     tagId = $("#{{ admin.uniqId }}_primaryTag option:selected").val(); 
     $("#primaryCategory").val("option:first"); 
     $("#tags *").attr("selected", false); 
    }); 

    $("#primaryCategory").change(function() { 
     $("#categories *").attr("selected", false); 
    }); 

});

primaryTag和primaryCategory是选择框。 tags和categories是多选框。

当我更改主标签时，primaryCategory选择框会根据需要填入第一个选项的默认值。不过，我也希望类别多选框被重置（所有选项都被取消选中）。这没有发生。我怎样才能做到这一点？

这里是HTML

来源

2012-04-16 Amit

你可以发布你的html吗，最好在jsfiddle – Jayanga 2012-04-16 06:08:58

$（'document'）。ready）应该是$（document）而不是字符串它是文档对象。另外$（function（）{}）;为简短的版本。 $（ '＃categories_select'）儿童（）removeAttr（ '禁用'）。; – GillesC 2012-04-16 06:11:51

$('document')必须是$(document)。之后，请记住默认的主要类别。在主标签更改设置默认主要类别并重置标签选项。在主要类别更改重置类别选项。

$(document).ready(function() { 
    var iDefault = $("#primaryCategory").val(); 

    $("#primaryTag").change(function() { 
     $("#primaryCategory").val(iDefault); 
     $("#tags option").attr("selected", false); 
    }); 

    $("#primaryCategory").change(function() { 
     $("#categories option").attr("selected", false); 
    }); 
});

另请参阅。

=== UPDATE ===

如果你想设置的主要类别的第一个选项替换为：

$(document).ready(function() { 
    $("#primaryTag").change(function() { 
     $("#primaryCategory option:first").attr("selected", true); 
     $("#tags option").attr("selected", false); 
    }); 

    $("#primaryCategory").change(function() { 
     $("#categories option").attr("selected", false); 
    }); 
});

另见this example。

=== UPDATE ===

如果你想要的类别将被重置了的主要类别被重置了后，更换的第一个版本：

$(document).ready(function() { 
    var iDefault = $("#primaryCategory").val(); 

    $("#primaryTag").change(function() { 
     $("#primaryCategory").val(iDefault); 
     $("#primaryCategory").change(); 
     $("#tags option").attr("selected", false); 
    }); 

    $("#primaryCategory").change(function() { 
     $("#categories option").attr("selected", false); 
    }); 
});

也看到这个updated example 。

来源

2012-04-16 06:26:27 scessor

我已经添加了一个替代解决方案。 – scessor 2012-04-16 06:42:37

谢谢，我已经学到了一些东西。但是，真正的问题是这样的： - 当我更改primaryTag时，primaryCategory得到更新。但相应的更改事件（取消选择类别）从未触发。这是修改的代码：xjsfiddle.net/r9d2f/ 希望这可以澄清问题。非常感谢您的努力。 – Amit 2012-04-16 07:03:33

你的jsfiddle的代码和我的（第一个版本）是一样的。我看不到问题。 – scessor 2012-04-16 07:08:47

你可以使用onclick函数。

<element onclick="newfunction()"></element>

来源

2012-04-16 06:13:15 tgb

基本上有两种方式可清除使用jQuery多选择框：

$("#my_select_box").val(null);

或

$("#my_select_box option").attr("selected",false);

首先改变选择元素没什么价值。第二个删除select元素中所有选项的选定属性。

我猜你的代码的效果是：

$("#my_select_box").attr("selected",false);

不因为#my_select_box工作实际选择的元素。删除select元素本身的selected属性不起作用，因为该属性仅对其中的选项有意义。

您确实必须尝试Firebug或嵌入到Chrome中的开发人员工具。他们可以极大地帮助调试javascript和jQuery代码。

来源

2012-04-16 06:30:52

如何通过JavaScript更改选择框时触发新功能？

回答

相关问题