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

时间:2016-08-09 22:43:35

标签: javascript jquery html ruby-on-rails

我遇到了Js / Rails代码的问题。我有一个动态创建的表单,当我单击一个按钮(它可以在同一页面中创建多个此表单)时,它包含一个具有从不相同的ID的选择。我需要根据select值为输入添加一些值。在第一种形式它完美地工作但后来在其他形式它不起作用。就像我说的那样,我无法访问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

非常感谢!我对这个问题感到很疯狂。

1 个答案:

答案 0 :(得分: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()]);
};