2

2つのドロップダウンがあり、一方が他方に影響を与えます。最初のものは2番目のフィルターとして機能します。IE8では、オプションを非(display:none)表示にすることはできません。したがって、実際にオプションを削除する必要があります。ただし、オプションを元のリストにリセットして、別のチーム用に再度フィルタリングできるようにしたいと思います。問題は、オプションを削除して元に戻さないか、何も削除しないことです。私の腸は、それが参照に関連している、または新しいオブジェクトをDOMに戻すことに関連していると言っています。

最初のドロップダウン（dd1）-これのhtmlは私のコードに正しくあり、表示するのに苦労しました。

<select id="pTeamFilter" onchange="teamChanged();" name="pTeamFilter">
    <option value="0">select a Team</option> 
    <option value="4"> Property Team </option> 
    <option value="7"> Rick's Team </option> 
    <option value="10"> Robert's Team </option>
</select>

2番目のドロップダウン（dd2）

<select id="pAnalystFilter" name="pAnalystFilter">
    <option value="0">select an Analyst</option>
    <option data-teamid="7" value="682"> Clark Kent </option>
    <option data-teamid="10" value="652"> Bruce Wayne </option>
    <option data-teamid="10" value="7"> Peter Parker </option>
    <option data-teamid="13" value="971"> Bruce Banner </option>
</select>

JS / jQ：

var analystFullArrayElement;
jQuery(document).ready(function() {
    analystFullArrayElement = jQuery(document.getElementById('pAnalystFilter')).clone();
});

function teamChanged() {
    //get the team id
    var teamId = document.getElementById('pTeamFilter').value;
    //get full list of Analysts.
    var newAnalystElement = jQuery(analystFullArrayElement).clone();
    jQuery('option', newAnalystElement).each(function() {
        //remove unwanted analysts
        if ((jQuery(this).attr("data-teamid") != teamId) && (jQuery(this).val() != 0)) {
            jQuery(this).remove();
        }
    });
    document.getElementById('pAnalystFilter').innerHTML() = jQuery(newAnalystElement).html();
    //var analystElement = document.getElementById('pAnalystFilter');
    //jQuery(analystElement).val(0);
}
4

2 に答える 2

1

また、次のことができます。

  1. 「onchange」属性の代わりにjqueryイベントバインディングを使用します。

  2. jQueryの代わりに$（）を使用してください。noConflictを使用する場合は、これを行うことができます

    （function（$）{jQueryの代わりに$を使用したコード}）（jQuery）;

  3. $(function () {})の代わりに使用$(document).ready(function () {})

  4. 連鎖を使用します。つまり

    jQuery（'＃pAnalystFilter'）。empty（）。append（jQuery（newAnalystElement）.html（））;

  5. data（）メソッドを使用してattr（'data-smth'）を取得します

  6. $（this）を複数回使用する場合は、変数に格納することをお勧めします

（関数（$）{
    $（関数（）{

        var analystFullArrayElement; //ちなみに、グローバルスコープはクリーンで良いです

        $（function（）{
            analystFullArrayElement = $（'＃pAnalystFilter'）。clone（）;
        }）;

        $（ "＃pTeamFilter"）。change（function（）{
            //チームIDを取得します
            var teamId = $（'＃pTeamFilter'）。val（）;
            //アナリストの完全なリストを取得します。
            var newAnalystElement = $（analystFullArrayElement）.clone（）;
            $（'option'、newAnalystElement）.each（function（）{
                //不要なアナリストを削除します
                var $ this = $（this）;
                if（（$ this.data（ "teamid"）！= teamId）&&（$ this.val（）！= 0））{
                    $ this.remove（）;
                }
            }）;                
            $（'＃pAnalystFilter'）。empty（）。append（$（newAnalystElement）.html（））;
        }）;

    }）;
}）（jQuery）;

また、yoгは($this.val() != 0)セレクターに：gt（0）を追加し、フィルターを適用することで比較を回避できます。

$('option', newAnalystElement).each(function(){
    var $this = $(this);
    if(($this.data("teamid") != teamId) && ($this.val() != 0)){
        $this.remove();
    }
});

になる

$('option:gt(0)', newAnalystElement).filter(function () {
    return $(this).data("teamid") != teamId;
}).remove();
于 2012-11-08T22:14:03.940 に答える
0

2つの変更。1.document.getElementsをjQuery呼び出しに変更しました。

            analystFullArrayElement = jQuery('#pAnalystFilter').clone();

  1. .empty（）の後に.append（）を使用して、古いリストを削除し、新しいリストを適用しました。

        function teamChanged(){
        //get the team id
        var teamId = jQuery('#pTeamFilter').val();
        //get full list of Analysts.
        var newAnalystElement = jQuery(analystFullArrayElement).clone();
        alert(jQuery(newAnalystElement).html());
        jQuery('option', newAnalystElement).each(function(){
            //remove unwanted analysts
            if((jQuery(this).attr("data-teamid") != teamId) && (jQuery(this).val() != 0)){
                jQuery(this).remove();
            }
        });
        alert(jQuery(newAnalystElement).html());                
        jQuery('#pAnalystFilter').empty();
        jQuery('#pAnalystFilter').append(jQuery(newAnalystElement).html());
    }
于 2012-11-08T17:46:29.553 に答える