通過文本設置所選選項並重置為默認選項

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