如何在动态创建时将 select 的值绑定到输入

Question

我的 Js/Rails 代码有问题。我有一个当我单击按钮时动态创建的表单（它可以在同一页面中创建多个这种表单），它包含一个 ID 永远不会相同的选择。我需要根据选择值将一些值放入输入中。在第一种形式中它工作得很好，但后来在其他形式中它不起作用。就像我说的，我无权访问 ID，因为它们是在 rails 中创建的。

HTML

<div class="test">
<div>
  <div class="divSelect">
  <select id="1470190840697_ad_type">
    <option>Element1</option>
    <option>Element2</option>
    <option>Element3</option>
    <option>Element4</option>
    <option>Element5</option>
    <option>Element6</option>
  </select>
</div>
  <div class="divInput">
    <input type="text">
  </div>
</div>
<div>

  //This is dynamically created
  <div class="divSelect">
    <select id="1470190846932_ad_type">
      <option>Element1</option>
      <option>Element2</option>
      <option>Element3</option>
      <option>Element4</option>
      <option>Element5</option>
      <option>Element6</option>
    </select>
  </div>
  <div>
    <input type="text">
  </div>
</div>

Javascript - jQuery

$('.test').on('change',$('.divSelect').children('select'),function(){
  updateTime();
});

function updateTime() {
  var tipoPauta = { 'Element1':1,
                    'Element2':2,
                    'Element3':3,
                    'Element4':4,
                    'Element5':5,
                    'Element6':6
                   }

  var select = $('.divSelect').children('select');
  $('.divInput').children('input').val(tipoPauta[select.val()]);
};

JSBIN CODE

非常感谢！我对这个问题很着迷。

Answer 1

正如@adeneo 提到的，您需要指定一个字符串作为选择器作为第二个参数。另外要更新正确的输入元素，您的代码应该类似于

$('.test').on('change',  '.divSelect' ,function(){
  var $select = $(this).find('select');
  updateTime($(this), $select);
});



function updateTime($divelement, $selectelement) {
  var tipoPauta = { 'Element1':1,
                    'Element2':2,
                'Element3':3,
                'Element4':4,
                'Element5':5,
                'Element6':6
               }

  var $input = $divelement.next().children('input');

  $input.val(tipoPauta[$selectelement.val()]);
};