CODEWITHSUNDEEP
jquery
FernandoPaiva
FernandoPaiva

Reputation: 4460

How do I to set selected value in a select option using jquery?

I have two select and it has the same value, just changing the id. What I want is getting value selected in select one, and then select the same value in second select.

How could I do this ?

trying

//here get the value select in select1 (it works)
var valueOfSelect1 = $('#select1 option:selected').val();

//select2 selected the value from select1
$('#select2 option[value=' + valueOfSelect1 + ']').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
  <option value="AC">AC</option>
  <option value="SP">SP</option>
  <option value="RJ">RJ</option>
</select>

<select id="select2">
  <option value="AC">AC</option>
  <option value="SP">SP</option>
  <option value="RJ">RJ</option>
</select>

Upvotes: 1

Views: 38

Answers (1)

0stone0
0stone0

Reputation: 43884

// On select change
$('#select1').change(function() {
  
    // Get select1 value
    const val = this.value;
    
    // Apply value to select2
    $('#select2').val(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
    <option value="AC">AC</option>
    <option value="SP">SP</option>
    <option value="RJ">RJ</option>
</select>

<select id="select2">
    <option value="AC">AC</option>
    <option value="SP">SP</option>
    <option value="RJ">RJ</option>
</select>

Upvotes: 2

Related Questions