通过文本设置选定选项并重置为默认选项答案

【问题标题】：Set selected option by text and reset to default option通过文本设置选定选项并重置为默认选项
【发布时间】：2017-01-15 23:07:31
【问题描述】：

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

两个按钮，我点击第一个按钮可以正常工作，然后我点击第二个按钮也可以工作，但是我再次点击第一个按钮不起作用！

我还想创建一个重置选项，为此我使用.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：如果有一个选项可以通过单击 input type="reset" 来重置我的所有输入（选择、文本、数字等），这可能是我重置问题的解决方案，因为我也尝试通过单击使用 (window.MyForm.reset()) 重置输入，但我最后选择的选项未重置。

【问题讨论】：

点击第二个按钮 (button2) 究竟应该完成什么？
@ScottMarcus 单击任何按钮应该会更改所选选项，但是我测试我的代码，这仅在您第一次单击每个按钮时才有效。
我建议更新您的问题，以反映您对 charlieftl 的回答发表的评论。
@chazsolo 就是这样！ if I click in this element I want to search if that text exists on my select options, I do this with contains

标签： javascript jquery

【解决方案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>

【讨论】：

这可能是解决我问题的另一种形式！谢谢。

【解决方案2】：

不要将selected 属性添加到选项中，而是设置selected 属性。这会强制浏览器取消选择所有其他选定的选项（如果列表不是 <select multiple>）。

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

或者，您可以阅读index 属性并在列表中设置selectedIndex，这是IMO 更清晰的行为。

$('.btn').click(function() {
  var value = $(this).val();
  var index = $('#Sel option:contains(' + value + ')').prop("index");
  $('#Sel').prop('selectedIndex', index);
});

另外，disabled 第一个选项可能会在某些浏览器中导致重置表单时出现问题。

【讨论】：

这可以帮助我通过文本设置选定的选项！现在我正在尝试解决重置表单的问题，在chrome中暂时没有问题，谢谢！

【解决方案3】：

在按钮中使用需要的实际值更简单，然后只需在选择上使用val()

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

然后一个监听器将适用于所有 3 个

$('.btn').click(function() {      
  $('#Sel').val($(this).val());    
});

至于清除所有其他输入只需将值设置为空字符串

$(':input').not('select').val('')

【讨论】：

是的，我知道使用 .val() 很简单，问题是我需要通过文本属性选择选项，使用按钮就是一个示例，但我可以使用输入、标签、等我需要使用 .text
只需从<option>中删除disabled
使用 .val() 可以工作，但就像我说的我不能选择我的选项的 .val()，我需要通过文本选项选择一个选项。

【解决方案4】：

不要与选项值混淆...并且设置选择器的值不会留下您必须手动设置 attrs 进行的任何杂散清理。

$('.btn').click(function() {
  var buttonValue = $(this).val();
  var optionValue = $("#Sel option:contains("+buttonValue+")").val();
  $("#Sel").val(optionValue);
});

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

【讨论】：