当一个表单中有多个下拉字段时,如何在JQuery中引用select标记的选择器



我在一个表单中有4个选择字段。我的jQuery代码只捕获一个字段。如何捕获其他字段并提取它们的值?

此外,我已经在所有这些字段上应用了Select2插件。有人能指引我吗?提前谢谢。

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

要获得所有select元素的选定文本,可以使用map()构建它们的数组,如下所示:

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>

最新更新