javascript - 通过文本设置所选选项并重置为默认选项

Question

我有一个带有默认选项 Select an option 的 html 选择元素当我单击其他元素时，我试图更改它，例如:我有一个值为 = MyText select option 的按钮，如果我单击此元素，我想搜索该文本是否存在于我的选择选项中，我使用 contains jQuery 方法执行此操作，并且似乎有效，问题是我可以有多个元素与文本，我不知道我的代码有什么问题，但似乎只在第一次工作。这是我的问题的一个示例:

Two buttons, I click on the first button and works fine, then I click on the second and works too, but then I click on the first again doesnt work!

我还想创建一个重置选项，为此我使用 .prop('selectedIndex', 0)但不起作用。

这是我的示例代码:

$('.btn').click(function() {
  var value = $(this).val();
  $('#Sel option:contains(' + value + ')').attr("selected", true);

});

$('.btn2').click(function() {
  $('#Sel').prop('selectedIndex', 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button value="Button 1" class="btn">Button 1</button>
<button value="Button 2" class="btn">Button 2</button>
<button class="btn2">Reset</button>

<select name="" id="Sel">
  <option value="0" selected disabled>Select an option</option>
  <option value="1">Button 1</option>
  <option value="2">Button 2</option>
</select>

PD:如果有一个选项可以通过单击输入类型=“重置”来重置我的所有输入(选择、文本、数字等)，这可能是我的重置问题的解决方案，因为我也尝试过单击使用 (window.MyForm.reset()) 重置输入，但我最后选择的选项未重置。

Answer 1

如果您检查文本并使用相同的函数来更改 select 标记的值，您可以完美地完成您想要的操作。

$('.btn').click(function() {
  var val = $(this).val();
  $('#Sel option').each(function(index){
    if($(this).text() == val)
      $('#Sel').prop('selectedIndex', index);
  });
});

$('.btn2').click(function() {
  $('#Sel').prop('selectedIndex', 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button value="Button 1" class="btn">Button 1</button>
<button value="Button 2" class="btn">Button 2</button>
<button class="btn2">Reset</button>

<select name="" id="Sel">
  <option value="0" selected disabled>Select an option</option>
  <option value="1">Button 1</option>
  <option value="2">Button 2</option>
</select>