How to reference a selector in JQuery for select tag when there are multiple dropdown fields in a si-CodePudding

I have 4 choice fields in a single form. My jQuery code only captures one field. How can I capture the other fields and extract their values?

Also, I have applied the Select2 plugin on all these fields. Can someone please guide me? Thanks in advance.

$('select').change(function() {
  var optionSelected = $(this).find("option:selected");
  var valueSelected = optionSelected.val();
  var textSelected = optionSelected.text();
  var csr = $("input[name=csrfmiddlewaretoken]").val();
  console.log(textSelected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
  <option value="" selected>---------</option>
  <option value="8">jfkdfkldlfd</option>
</select>


<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
  <option value="" selected>---------</option>
  <option value="1">fefafd</option>
  <option value="2">effeafaefe</option>
</select>

<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
  <option value="" selected>---------</option>
  <option value="1">fdfef</option>
</select>


<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
  <option value="" selected>---------</option>
  <option value="1">kflkdjkf</option>
  <option value="2">fldfjdfj</option>
</select>

CodePudding user response：

To get the selected text of all the select elements you can use map() to build an array of them, like this:

let getSelectedText = () => {
  let textArr = $selects.map((i, el) => $(el).find('option:selected').text()).get();
  console.log(textArr);
}
let $selects = $('select').on('change', getSelectedText);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
  <option value="" selected>---------</option>
  <option value="8">jfkdfkldlfd</option>
</select>


<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
  <option value="" selected>---------</option>
  <option value="1">fefafd</option>
  <option value="2">effeafaefe</option>
</select>

<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
  <option value="" selected>---------</option>
  <option value="1">fdfef</option>
</select>


<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
  <option value="" selected>---------</option>
  <option value="1">kflkdjkf</option>
  <option value="2">fldfjdfj</option>
</select>