如何通過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更改選擇框時觸發新功能？

回答

相關問題