当单个表单中有多个下拉字段时，如何在 JQuery 中为选择标记引用选择器？

Posted 2023-05-07

【中文标题】当单个表单中有多个下拉字段时，如何在 JQuery 中为选择标记引用选择器？

【英文标题】：How to reference a selector in JQuery for select tag when there are multiple dropdown fields in a single form?

【发布时间】：2022-01-14 07:53:40

【问题描述】：

我在一个表单中有 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>

【问题讨论】：

因为$(this)指的是select元素，其值已经改变了。

您的意思是当其中一个选择发生变化时，您希望获得所有选择的值？

@SaeedShamloo 实际上不是，首先我要做$(document).ready() 然后我想从表单中的所有选择字段中提取值来做一些数学运算。那我该怎么做呢？

【参考方案1】：

要获取所有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>

【讨论】：

谢谢。成功了！