如何仅在 html 的多个 <select> 标签中选择一个选项时触发功能？

问题描述

我的 html 代码中有三个 <select> 标签

我只想在所有三个 <select> 标签都选择了一个选项时触发一个函数（default 除外）。我该怎么做？

<p id="cln_name"><b>Colony name</b> :&nbsp;
  <select name="colony_name" id="colony_name" style="max-width:90%;">
    <option value="default" selected="selected_code">Select your colony name</option>
    <option value="code_one" selected="selected_code">PCR235LK</option>
    <option value="code_two" selected="selected_code">AHF21IOD</option>
  </select>
</p>
<p id="cln_type"><b>Type</b> :&nbsp;
  <select name="colony_type" id="colony_type">
    <option value="default" selected="selected_type">Select your colony type</option>
    <option value="ONE" selected="selected_type">I</option>
    <option value="TWO" selected="selected_type">II</option>
    <option value="THREE" selected="selected_type">III</option>
  </select>
</p>
<p id="qrtr_no"><b>Quarter No</b> :&nbsp;
  <select name="quarter_no" id="quarter_no">
    <option value="default" selected="selected_type">Select your quarter no</option>
    <option value="first" selected="selected_type">ABC/12</option>
    <option value="second" selected="selected_type">DEF/34</option>
  </select>
</p>

解决方法

委托并使用每一个

原生 JavaScript

const container = document.getElementById('container');
const selects = [...container.querySelectorAll('select')];
container.addEventListener('change',function() {
  const noDefault = selects.every(sel => sel.value !='default');
  console.log(noDefault);
  if (noDefault) alert("Yes"); // execute if noDefault is true
});

<div id="container">
<p id="cln_name"><b>Colony name</b> :&nbsp;
  <select name="colony_name" id="colony_name" style="max-width:90%;">
    <option value="default" selected="selected_code">Select your colony name</option>
    <option value="code_one" selected="selected_code">PCR235LK</option>
    <option value="code_two" selected="selected_code">AHF21IOD</option>
  </select>
</p>
<p id="cln_type"><b>Type</b> :&nbsp;
  <select name="colony_type" id="colony_type">
    <option value="default" selected="selected_type">Select your colony type</option>
    <option value="ONE" selected="selected_type">I</option>
    <option value="TWO" selected="selected_type">II</option>
    <option value="THREE" selected="selected_type">III</option>
  </select>
</p>
<p id="qrtr_no"><b>Quarter No</b> :&nbsp;
  <select name="quarter_no" id="quarter_no">
    <option value="default" selected="selected_type">Select your quarter no</option>
    <option value="first" selected="selected_type">ABC/12</option>
    <option value="second" selected="selected_type">DEF/34</option>
  </select>
</p></div>

jQuery

$('#container select').on('change',function() {
  const vals = $(this)
    .closest('#container')
    .find('select')
    .map(function() {
      return this.value
    })
    .get(); // values of selects in container
  console.log(vals)
  const noDefault = vals.every(val => val != 'default');
  // console.log(noDefault);
  if (noDefault) console.log("Yes"); // execute if noDefault is true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <p id="cln_name"><b>Colony name</b> :&nbsp;
    <select name="colony_name" id="colony_name" style="max-width:90%;">
      <option value="default" selected="selected_code">Select your colony name</option>
      <option value="code_one" selected="selected_code">PCR235LK</option>
      <option value="code_two" selected="selected_code">AHF21IOD</option>
    </select>
  </p>
  <p id="cln_type"><b>Type</b> :&nbsp;
    <select name="colony_type" id="colony_type">
      <option value="default" selected="selected_type">Select your colony type</option>
      <option value="ONE" selected="selected_type">I</option>
      <option value="TWO" selected="selected_type">II</option>
      <option value="THREE" selected="selected_type">III</option>
    </select>
  </p>
  <p id="qrtr_no"><b>Quarter No</b> :&nbsp;
    <select name="quarter_no" id="quarter_no">
      <option value="default" selected="selected_type">Select your quarter no</option>
      <option value="first" selected="selected_type">ABC/12</option>
      <option value="second" selected="selected_type">DEF/34</option>
    </select>
  </p>
</div>

,

我在您的 html 代码中添加了一个 jquery 代码，并在您的 html 代码中稍加更新，而不是每个选项都称为已选择，我只是提到了默认的已选择，其余的是您可以检查您的代码，如果我理解您的意思，希望对您有所帮助要求正确。

    [IPKernelApp] ERROR | Failed to load connection file: 'C:\\Users\\sorra\\AppData\\Roaming\\jupyter\\runtime\\kernel-e4d16f9a-c21f-4fa1-86bc-16d08a823479.json'
Traceback (most recent call last):
  File "C:\Users\sorra\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.7_qbz5n2kfra8p0\LocalCache\local-packages\Python37\site-packages\ipykernel\kernelapp.py",line 262,in init_connection_file
    self.load_connection_file()
  File "C:\Users\sorra\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.7_qbz5n2kfra8p0\LocalCache\local-packages\Python37\site-packages\jupyter_client\connect.py",line 494,in load_connection_file
    info = json.load(f)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.7_3.7.2544.0_x64__qbz5n2kfra8p0\lib\json\__init__.py",line 296,in load
    parse_constant=parse_constant,object_pairs_hook=object_pairs_hook,**kw)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.7_3.7.2544.0_x64__qbz5n2kfra8p0\lib\json\__init__.py",line 348,in loads
    return _default_decoder.decode(s)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.7_3.7.2544.0_x64__qbz5n2kfra8p0\lib\json\decoder.py",line 337,in decode
    obj,end = self.raw_decode(s,idx=_w(s,0).end())
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.7_3.7.2544.0_x64__qbz5n2kfra8p0\lib\json\decoder.py",line 355,in raw_decode
    raise JSONDecodeError("Expecting value",s,err.value) from None
json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

$("#colony_name,#colony_type,#quarter_no").on("change",function() {
  var colony_name = $("#colony_name").val();
  var colony_type = $("#colony_type").val();

  var quarter_no = $("#quarter_no").val();
  if (colony_name != "default" && colony_type != "default" && quarter_no != "default") {
    alert("call your function in this function tag"); //call your function or execution here
  }
});