jQuery：如何挂钩和识别下拉选择

Posted 2023-02-21

【中文标题】jQuery：如何挂钩和识别下拉选择

【英文标题】：jQuery: How to hook and identify drop-down selection

【发布时间】：2021-04-06 09:26:29

【问题描述】：

我有一个包含选择的行列表：

<ul>
  % for select in selects %
    <li>
      <select id="select- select.id ">
        <option selected disabled>Select value...</option>
        % for value in values %
          <option value=" value.id "> value.name </option>
        % endfor %
      </select>
    </li>
  % endfor %
</ul>

我想要统一的 jQuery 代码，例如：

$(something).onSelect(function(value) 
  // use this.id as select id;
  // use value as selected value;
  return false; // don't change selected item, leave it as 'Select value...'

【问题讨论】：

给 一个通用类并将其用作选择器。

我添加了模板循环插入包含选择输入元素的多行。也许这会澄清问题

我知道你在循环播放。这不会改变我的建议。没有理由选择器必须复杂并处理不同的 id。它可以只通过一个普通的类来选择。进入事件处理程序后，您可以根据需要从元素中获取 id，以了解您正在处理的是哪一个

@Taplar 你能详细说明一下你的评论作为代码的答案吗？

onSelect 是什么？是您正在使用的某个库吗？

【参考方案1】：

您可以在选择器中使用*，这会选择所有具有指定属性且值包含给定子字符串的元素，然后只需使用attr('id')) 和.val() 从选择框获取值。

演示代码：

$("select[id*='select']").on("change", function(value) 
  console.log($(this).attr('id')) //get id
  console.log($(this).val()) //get value
  //some condition 
  //to set first value
  //$(this).val('Select value...') //or
  //$("#"+$(this).attr('id')).val('Select value...')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>

  <li>
    <select id="select-1">
      <option selected disabled>Select value...</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </li>
  <li>
    <select id="select-2">
      <option selected disabled>Select value...</option>
      <option value="1">1</option>
      <option value="2">2</option>

    </select>
  </li>
  <li>
    <select id="select-3">
      <option selected disabled>Select value...</option>
      <option value="1">1</option>
      <option value="2">2</option>

    </select>
  </li>

</ul>