選択した値を選択して復元選択

Question

フィデルには選択された選択がロードされるときに「デンマーク」と「フランス」の2つのオプションが事前に入力されています。選択ボックスでさらに値を選択して[クリア]ボタンをクリックすると、選択した選択項目を同じデンマークとフランスで復元します。

このコードを変更して、選択した値をプレフィックスにします。

$("#Clear").click(function() { 
    $('.chosen-select option').prop('selected', false).trigger('chosen:updated'); 
}); 

JSFiddle

UPDATE： があれば、事前に充填されているオプションは重要ではありませんが、彼らは、復元されなければならないような方法がある場合はそれが本当に良いでしょう。

Answer 1

必要なものは、あらかじめ選択したオプションの値の配列を作成することです。次に、この配列にforEachループを使用して、selectedの値を変更し、トリガー更新前の初期状態を取得することができます。

$("#countries").chosen(); 

let preselected = []; 

$('[selected]').each((i, node) =>{ 
    preselected.push($(node).attr('value')); 
}); 

$("#Clear").click(function() { 
    $('.chosen-select option').prop('selected', false); 

    preselected.forEach(pre => { 
     $(".chosen-select option[value='" + pre + "']") 
     .attr('selected', 'selected') 
     .trigger('chosen:updated'); 
    }); 
}); 

Fiddle

あなたはhere何もあなたがこれを達成するために使用できるプラグインでもありません見ることができるように、あなたがあなたのDOMとトリガー更新を変更することで、それをしなければならないようです。私はluckyapeの答えと鉱山のコードを使用して、それを混合します。

Answer 2

が、これはそのような、オプションが事前に入力されているかは重要ではありません、というようにする方法がある

$("#countries").chosen(); 

$("#Clear").click(function() { 
    $('.chosen-select option').prop('selected', false); 
    $('.chosen-select').val(['Denmark', 'France']).trigger('chosen:updated'); 
}); 

http://jsfiddle.net/y5cnd018/