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

Question

我有一个带有默认选项的html select元素Select an option ，当我单击其他元素时，我试图对其进行更改，例如：如果我单击此元素，则有一个value = MyText select option的按钮想要搜索文本是否在我的选择选项上存在，我使用包含 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：如果可以通过单击输入type =“ reset”来重置我的所有输入（选择，文本，数字等），这可能是我的重置问题的解决方案，因为我也尝试通过单击重置输入与（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> 

Answer 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第一选项可能会在重置表单时在某些浏览器中引起麻烦。

Answer 3

在按钮中使用实际值需要使用的值更简单，然后在select上使用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('')

Answer 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);
});