0

how do I get one select field's value and use it to populate other select fields? e.g. below if Volvo is selected for the first select field, I would like the others to be Volvo as well. But at the same time, I'd like each individual select field to still be changeable e.g. Once I've selected Volvo for the first field and every field has been changed to Volvo, I should still be able to change one of the select fields to Audi.

TIA

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
CompilationError
  • 15
  • 4
  • 2
    Do you mean you want the other `select`s to have the matching value *selected*, or do you mean you want to re-populate the `select`'s HTML based on the first selection? – CertainPerformance Apr 30 '18 at 04:09
  • You can add event listeners to all the fields. When value of anyone of them changes you can use it in other fields. Check this post https://stackoverflow.com/q/9490906 –  Apr 30 '18 at 04:31
  • Is there anyway to do it using AngularJS? – CompilationError Apr 30 '18 at 20:39

1 Answers1

1

If you just want to do this for the first select box, then here is a way:

$('select:first').change(function() {
  $('select').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
31piy
  • 23,323
  • 6
  • 47
  • 67