jquery find（）を使用してドロップダウンを選択すると、他のドロップダウンの選択が解除されます

Question

ドロップダウンオプション（ページ上のいくつかのドロップダウン）をその値で選択しようとしています。私は関連性があると思うコードの下に投稿していますが、もっと必要な場合は教えてください！

HTML

<form class="controls" id="Filters"> 
    <fieldset> 
     <select id="select1" class="dropdowns"> 
     <option selected="selected" value=".default1">Default 1</option> 
     <option value=".option1">Option 1</option> 
     <option value=".option2">Option 2</option> 
     </select> 
    </fieldset> 
    <fieldset> 
     <select id="select2" class="dropdowns"> 
     <option selected="selected" value=".default2">Default 2</option> 
     <option value=".option3">Option 3</option> 
     <option value=".option4">Option 4</option> 
    </fieldset> 
    <fieldset> 
     <select id="select3" class="dropdowns"> 
     <option selected="selected" value=".default3">Default 3</option> 
     <option value=".option5">Option 5</option> 
     <option value=".option6">Option 6</option> 
    </fieldset> 
</form> 

jQueryの

var example = ".option3"; 

var example = ".option3"; 
 
$('#Filters').find('.dropdowns').val(example).click();

<form class="controls" id="Filters"> 
 
    <fieldset> 
 
    <select id="select1" class="dropdowns"> 
 
     <option selected="selected" value=".default1">Default 1</option> 
 
     <option value=".option1">Option 1</option> 
 
     <option value=".option2">Option 2</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select id="select2" class="dropdowns"> 
 
     <option selected="selected" value=".default2">Default 2</option> 
 
     <option value=".option3">Option 3</option> 
 
     <option value=".option4">Option 4</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select id="select3" class="dropdowns"> 
 
     <option selected="selected" value=".default3">Default 3</option> 
 
     <option value=".option5">Option 5</option> 
 
     <option value=".option6">Option 6</option> 
 
    </select> 
 
    </fieldset> 
 
</form>

enter code here $（ '＃フィルタ'）。を見つける（」。ドロップダウン）。valを（たとえば） 。クリック（）;

これは機能し、正しいドロップダウンオプションを選択し、ドロップダウンでフィルタリングプロセスを開始します（私はMixItUpを使用しています）が、この例ではデフォルト値ではなく空白にする他のすべてのドロップダウンを選択解除します。デフォルト1、デフォルト2、デフォルト3など（ただし、正しい値を含むドロップダウンは除く）。

jQueryコードで正しい値（example = ".option3"）でドロップダウンオプションを見つけても、他のドロップダウンには影響せず、デフォルトの初期値になっていることを確認したいと考えています。

どこにでも私の問題の答えを見つけることができませんでしたので、助けていただければ幸いです！

Answer 1

findあなたの選択を解除しません。 valがあります。

$('#Filters')は、formオブジェクトを検出します。次に.find('.dropdowns')は、その中にすべてselectオブジェクトを検出します。次に.val(example)は、selectオブジェクトのすべての値を.option3に設定します。しかし、その価値はほとんどの人にとっては無効です。

var example = ".option3"; 
 
$('#Filters').find('.dropdowns:has(option[value="' + example + '"])').val(example);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="controls" id="Filters"> 
 
    <fieldset> 
 
     <select id="select1" class="dropdowns"> 
 
     <option selected="selected" value=".default1">Default 1</option> 
 
     <option value=".option1">Option 1</option> 
 
     <option value=".option2">Option 2</option> 
 
     </select> 
 
    </fieldset> 
 
    <fieldset> 
 
     <select id="select2" class="dropdowns"> 
 
     <option selected="selected" value=".default2">Default 2</option> 
 
     <option value=".option3">Option 3</option> 
 
     <option value=".option4">Option 4</option> 
 
     </select> 
 
    </fieldset> 
 
    <fieldset> 
 
     <select id="select3" class="dropdowns"> 
 
     <option selected="selected" value=".default3">Default 3</option> 
 
     <option value=".option5">Option 5</option> 
 
     <option value=".option6">Option 6</option> 
 
     </select> 
 
    </fieldset> 
 
</form>

は（うまくいけば、あなたのオプション値が優勝：

私はあなたがしたいと仮定すると、実際にあなたの値を取ることができる唯一のselectオブジェクトを検索し、それらのみに値を設定することです内部に引用符のようなクレイジーなものがあります。）

Answer 2

下記の解決策を見つけてください。

var example = ".option3"; 
 
$('#Filters').find('.dropdowns').val(example).prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="controls" id="Filters"> 
 
    <fieldset> 
 
    <select id="select1" class="dropdowns"> 
 
     <option selected="selected" value=".default1">Default 1</option> 
 
     <option value=".option1">Option 1</option> 
 
     <option value=".option2">Option 2</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select id="select2" class="dropdowns"> 
 
     <option selected="selected" value=".default2">Default 2</option> 
 
     <option value=".option3">Option 3</option> 
 
     <option value=".option4">Option 4</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select id="select3" class="dropdowns"> 
 
     <option selected="selected" value=".default3">Default 3</option> 
 
     <option value=".option5">Option 5</option> 
 
     <option value=".option6">Option 6</option> 
 
    </select> 
 
    </fieldset> 
 
</form>

Answer 3

私はあなたのポイントを持っている場合、あなたはあなたがメートルである必要が.find('option[value="'+example+'"]').prop('selected', true);

デモ

var example = ".option3"; 
 
$('#Filters').find('option[value="'+example+'"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="controls" id="Filters"> 
 
    <fieldset> 
 
     <select id="select1" class="dropdowns"> 
 
     <option selected="selected" value=".default1">Default 1</option> 
 
     <option value=".option1">Option 1</option> 
 
     <option value=".option2">Option 2</option> 
 
     </select> 
 
    </fieldset> 
 
    <fieldset> 
 
     <select id="select2" class="dropdowns"> 
 
     <option selected="selected" value=".default2">Default 2</option> 
 
     <option value=".option3">Option 3</option> 
 
     <option value=".option4">Option 4</option> 
 
    </fieldset> 
 
    <fieldset> 
 
     <select id="select3" class="dropdowns"> 
 
     <option selected="selected" value=".default3">Default 3</option> 
 
     <option value=".option5">Option 5</option> 
 
     <option value=".option6">Option 6</option> 
 
    </fieldset> 
 
</form>

Answer 4

を使用することができますあなたのドロップダウンを選択すると、特定の鉱石。 が、その後のval（）を使用して値を選択し、それを選択するドロップダウンIDを使用し、その後、クリックイベントをトリガし、EI：

そうでない場合

var example = ".option3"; $('#Filters').find('.dropdowns #select2 ').val(example).click(); 

あなたはすべての3つのドロップダウンに値「オプション3」を代入していました＃select1と＃select3が空に見える理由です。