Question

我的目标是在最新的选择框不再为空时添加一个新的选择框。我的jquery命令看起来像：

$(document).ready(function(){
    $('select').on('change', function() {
        $.get("get_exercise_list", function(data, status){
                //Create new select box
            });
        });
    });

但不是选择＆＃39;我需要使用最新选择框的id。我想我会使用某种计数器并为每个选择框创建ID，例如＆＃34; select1＆＃34; ＆＃34; SELECT2＆＃34;但我不确定如何跟踪jquery中的那一部分。

Answer 1

你可以这样做：

$('select:last').on('change', function() {
  // run something here
})

或者这个：

$(document).on('change', 'select:last', function() {
  // run something here
})

e.g。

＆＃13;

$(document).on('change', '#first-container > select:last', function() {
  console.log('First container - el:' + this.id)
})

$(document).on('change', '#second-container > select:last', function() {
  console.log('Second container - el:' + this.id)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first-container">

  <select id="fs1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <select id="fs2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <select id="fs3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="second-container">
  <select name="ss1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <select id="ss2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <select id="ss3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

＆＃13;

如何在表单中的最后一个选择框上执行jquery命令？

1 个答案: