CODEWITHSUNDEEP
javascriptjquery
User1899289003
User1899289003

Reputation: 872

Set selected option by text and reset to default option

I have an html select element with a default option Select an option and I'm trying to change it when I click in some other element, for example: I have a button with value = MyText select option, if I click in this element I want to search if that text exists on my select options, I do this with contains jQuery method and seems to work, the problem is that I can have more than one elements with text and I don't know what is wrong with my code but seems to work only the first time. Here is an example of my problem:

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!

Also I want to create a reset option, for this I'm using .prop('selectedIndex', 0) but doesnt work.

Here is my example code:

$('.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: If there is an option to reset all my inputs (select, text, number, etc.) by clicking on input type="reset" that could be a solution for my reset problem, because I also tried by clicking on reset input with (window.MyForm.reset()) but my last selected option is not reseted.

Upvotes: 0

Views: 4238

Answers (4)

The Software Barbarian
The Software Barbarian

Reputation: 459

Don't get confused with option values... and setting the value of the selector doesn't leave any stray cleanup you have to do manually setting 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);
});

Upvotes: 0

Christian Valentin
Christian Valentin

Reputation: 519

If you check the text and use the same function to change the value of select tag, you can do what you want perfectly.

$('.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>

Upvotes: 2

Rafael
Rafael

Reputation: 18522

Instead of adding selected attribute to the options, set the selected property. This forces the browser to unselect all other selected options (if list is not <select multiple>).

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

Alternatively, you can read the index property and set selectedIndex on the list, which is IMO more clear behaviour.

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

Also, the disabled first option may cause trouble in some browsers when resetting the form.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

Simpler to use actual values need in buttons and then simply use val() on the select

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

Then one listener would work for all 3

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

As for clearing all other inputs just set value to empty string

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

Upvotes: 0

Related Questions