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 $（'＃Filters'）。find（'。dropdowns'）。val（example）.click（）;

这样做，选择正确的下拉选项，下拉菜单启动过滤过程（我正在使用MixItUp），但它取消选择所有其他下拉列表，使其为空白而不是默认值，这应该是（在此示例中）默认值1，默认2，默认3等（当然除了包含正确值的下拉列表）。

我希望让jQuery代码找到具有正确值的dropdown选项（example =“.option3”），但不会影响其他下拉菜单，并确保它们仍处于默认初始值。

我无法在任何地方找到问题的答案，所以任何帮助都会受到赞赏！

Answer 1

如果我明白你的意思，你可以使用.find('option[value="'+example+'"]').prop('selected', true);

演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

find不会取消选择您的选择。 val确实如此。

会发生什么，$('#Filters')找到form对象。然后.find('.dropdowns')找到其中的所有select个对象。然后.val(example)将所有select个对象的值设置为.option3。但是，这个值对大多数人来说都是无效的。

我认为您想要的只是找到实际可以获取您的值的select个对象，并仅为这些对象设置值：

＆＃13;

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

＆＃13;

<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>

＆＃13;

（希望你的期权价值不会像他们内部的报价一样疯狂。）

Answer 3

请找到以下解决方案，希望这对您有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

选择下拉列表时需要更加具体。使用下拉ID选择它，然后使用val（）选择一个值，然后触发click事件，ei。：

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

否则，您为所有三个下拉列表分配值“option3”，这就是＃select1和＃select3看起来为空的原因。

使用jquery find（）选择下拉列表取消选择其他下拉列表

4 个答案: