Question

我已经获得了以下HTML结构（我没有以下元素的ID，因为它们是动态创建的）：

<fieldset>
  <div class="classA">
    <select onchange="updateInputBox()">
      <option>a</option>
      <option>b</option>
      <option>c</option>
      <option>d</option>
    </selects>
  </div>
  <div class="classB">
    <input data-myAttribute="case1">
  </div>
  <div class="classC">
    <a type="button">
      <i class="fa fa-remove">x</i>
    </a>
  </div>
</fieldset>

该档案集及其子项是动态创建的。我想根据用户在selectBox中选择的内容更改inputBox中的属性。

这是一个例子，如果元素字段集不是动态的，我会怎么做（以下包含元素有ID，但只是因为我想演示我想要的东西;实际上我没有ID，因为它们是通过点击按钮动态创建的，我没有在这里显示）： https://jsfiddle.net/thadeuszlay/6bsgazvv/4/

但不幸的是，我没有字段集的id，因为它是动态创建的。有没有办法获得当前元素的位置？

我试图在updateInputBox-function中传递自己：

<select id="selectBox" onchange="updateInputBox('+ this +')">

我也试过jQuery：

$(this).parent().parent()

但在这两种情况下，控制台都会说

＆＃34;意外的标识符＆＃34;

更新：在函数内部执行类似这样的操作（currentElement是selectBox / DropDownBox）：

currentElement.parent（）。parent（）。setAttribute（＆＃34; data-myAttribute＆＃34;，＆＃34; hello＆＃34;）;

未捕获的TypeError：selectBox.parent不是函数

Answer 1

您可以使用jquery'最近'，如下所示。

<强> HTML

<select id="selectBox" onchange="updateInputBox(this)">

<强> JS

function updateInputBox(selectElm) {
   var inputElm = $(selectElm).closest('fieldset').find('input');

inputElm.attr('data-myAttribute', $(selectElm).val());

}

//而不是内联onchange事件和上面的代码，你可以使用下面的方法来触发事件

$(document).on('change', 'fieldset select', function () {
       var inputElm = $(this).closest('fieldset').find('input');

    inputElm.attr('data-myAttribute', $(this).val());

    });

Answer 2

在updateInputBox中，只需查看#selectBox

的selectedIndex即可

Answer 3

功能

<select id="selectBox" onchange="updateInputBox(this)">

Answer 4

这是jquery版本：solution

您需要为ID为selectBox

的select触发change（）事件

$(document).on('change','select',function(){
    var value=$(this).val();
    $(this).parents('fieldset').find('input').attr('data-myAttribute',value);
});

如何使用javascript选择当前元素？

4 个答案: