Question

我有一个实体属性有三个三个选择字段。如下图所示（Fiddle）。

我正在尝试找到一种方法来检测哪些选择字段已被使用（这是用户点击的最后一个）并获取（提醒）此选择框的编号（0,1,2）和选定的值。

此代码的目的是告诉服务器端保存表单时需要考虑的选择框。我将通过Ajax发送数据（我知道如何，我只需要部分来确定它已被使用的选择框）

<div class="form-group">
<label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label>
<div class="col-sm-10 form-inline">

<select id="_D1_H1">
<option value="" disabled="" selected="" hidden="">label1</option>
<option value="Value1d">Value1d</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
</select>

<select id="D1_H2">
<option value="" disabled="" selected="" hidden="">label2</option>
<option value="Value4">Value4</option>
<option value="Value5">Value5</option>
</select>

<select id="D1_H3">
<option value="" disabled="" selected="" hidden="">label3</option>
<option value="Value6">Value6</option>
</select>

</div>
 </div>

Answer 1

您可以使用index()方法获取索引，并使用val()

获取值

$('select').change(function() {
  var n = $(this).index()
  var val = $(this).val();

  console.log(n + ' ' + val)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label>
  <div class="col-sm-10 form-inline">
    <select id="_D1_H1">
      <option value="" disabled="" selected="" hidden="">label1</option>
      <option value="Value1d">Value1d</option>
      <option value="Value2">Value2</option>
      <option value="Value3">Value3</option>
    </select>

    <select id="D1_H2">
      <option value="" disabled="" selected="" hidden="">label2</option>
      <option value="Value4">Value4</option>
      <option value="Value5">Value5</option>
    </select>

    <select id="D1_H3">
      <option value="" disabled="" selected="" hidden="">label3</option>
      <option value="Value6">Value6</option>
    </select>

  </div>
</div>

Answer 2

$('.drp').change(function() {
 let selectedDropdown = $(this).attr('id');
 let selectedValue = $(this).val();
 alert(selectedDropdown);
 alert(selectedValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-group">
    <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label>
    <div class="col-sm-10 form-inline">

        <select class="drp" id="_D1_H1">
<option value="" disabled="" selected="" hidden="">label1</option>
<option value="Value1d">Value1d</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
</select>

        <select class="drp" id="D1_H2">
<option value="" disabled="" selected="" hidden="">label2</option>
<option value="Value4">Value4</option>
<option value="Value5">Value5</option>
</select>

        <select class="drp" id="D1_H3">
<option value="" disabled="" selected="" hidden="">label3</option>
<option value="Value6">Value6</option>
</select>

    </div>
</div>

Answer 3

其他答案似乎很好，我只是添加一个纯粹的js替代品。我在添加事件监听器时使用了数据属性来存储订单，但是当您构建标记时，您可能希望这样做，具体取决于您的具体情况。

＆＃13;

function addEventListeners() {
  selects = document.getElementsByTagName('select');
  for (i = 0; i < selects.length; i++) {
    selects[i].setAttribute('data-pos', i);
    selects[i].addEventListener('change', alertChange);
  }
}

function alertChange() {
  console.log('Select number: ' + this.getAttribute('data-pos') + ' changed to value: ' + this.value + '.');
}

addEventListeners();

＆＃13;

<div class="form-group">
  <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label>
  <div class="col-sm-10 form-inline">

    <select id="_D1_H1">
<option value="" disabled="" selected="" hidden="">label1</option>
<option value="Value1d">Value1d</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
</select>

    <select id="D1_H2">
<option value="" disabled="" selected="" hidden="">label2</option>
<option value="Value4">Value4</option>
<option value="Value5">Value5</option>
</select>

    <select id="D1_H3">
<option value="" disabled="" selected="" hidden="">label3</option>
<option value="Value6">Value6</option>
</select>

  </div>
</div>

＆＃13;

Answer 4

现在我看了你的更新，你可能想要

// for some reason I could not use the sel.defaultSelected
// so I save the index at load
$(function() {
  $("select").each(function() {
    $(this).data("def", this.selectedIndex);
  });

  $("#send").on("click", function() {
    var changed = [];
    $("select").each(function(i, sel) {
      if (sel.selectedIndex != $(this).data("def")) changed.push([i, sel.value])
    });
    console.log(changed);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label>
  <div class="col-sm-10 form-inline">

    <select id="_D1_H1">
      <option value="">label1</option>
      <option value="Value1d" selected>Value1d</option>
      <option value="Value2">Value2</option>
      <option value="Value3">Value3</option>
    </select>

    <select id="D1_H2">
      <option value="">label2</option>
      <option value="Value4">Value4</option>
      <option value="Value5">Value5</option>
    </select>

    <select id="D1_H3">
      <option value="">label3</option>
      <option value="Value6">Value6</option>
    </select>

  </div>
</div>
<button id="send" type="button">Send</button>

找出使用三个选择框中的哪一个

4 个答案: