CODEWITHSUNDEEP
javascriptjqueryhtml
freeewillie
freeewillie

Reputation: 63

Using jquery find() to select a dropdown deselects other dropdowns

I am attempting to select a dropdown option (out of several dropdowns on the page) by its value. I'm posting below code I think is relevant but if more is needed please let me know!

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 $('#Filters').find('.dropdowns').val(example).click();

This works, selects the correct dropdown option and the dropdown initiates the filtering process (I'm using MixItUp), but it deselects all other dropdowns making them blank instead of their default values, which should be (in this example) Default 1, Default 2, Default 3, etc. (except of course the dropdown that contains the correct value).

I'm hoping to have jQuery code find the dropdown option with the correct value (example = ".option3") but not affect the other dropdowns and make sure they're still on their default initial values.

I haven't been able to find answers to my problem anywhere so any help would be appreciated!

Upvotes: 1

Views: 70

Answers (4)

user506170
user506170

Reputation:

You need to be more specific when selecting your dropdown. Use the dropdown ID to select it, then choose a value using val(), then trigger a click event, ei.:

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

Otherwise you're assigning the value "option3" for all three dropdowns, which is why #select1 and #select3 look empty.

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

If I got your point you can use .find('option[value="'+example+'"]').prop('selected', true);

Demo

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>

Upvotes: 1

Alex Mac
Alex Mac

Reputation: 2993

Please find below solution, I hope this will help you.

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>

Upvotes: 0

Amadan
Amadan

Reputation: 198436

find does not deselect your selects. val does.

What happens is, $('#Filters') finds the form object. Then .find('.dropdowns') finds all the select objects within it. Then .val(example) sets the value of all of those select objects to .option3. However, that value happens to be invalid for most of them.

What I assume you want is to find only the select objects that actually can take your value, and set the value for those only:

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>

(Hopefully your option values won't have crazy things like quotes inside them.)

Upvotes: 0

Related Questions