时间戳

首页 > 解决方案 > 添加新的选择标签时如何更改选择标签的元素

javascript - 添加新的选择标签时如何更改选择标签的元素

问题描述

请帮我解决这个问题，我希望当我选择元素将显示的选项时。但是即使我添加了新的选择标签，代码也不起作用，它也发生了。这是我的代码。

<div id="ugh">
<select class="handicap">
<option value="a"> Example 1</option>
<option value="b"> Example 2</option>
</select>
<div id="ahh">
<div class="row">
<div class="inputs">
</div>
</div>
</div>
</div>
<a id="sigepapa" class="fa fa-clone"></a>

<script>
$('#sigepapa').click(function(){
var ako ='';

ako += '<select class="handicap">';
ako += '<option value="a">Example 1</option>';
ako += '<option value="b"> Example 2</option>';
ako += '</select>';

ako += '<div id="ahh">';
ako += '<div class="row">';
ako += '<div class="inputs">';
ako += '</div>';
ako += '</div>';
ako += '</div>';

$('#ugh').append(ako);
});
</script>

<script>
$(document).ready(function()
{
 $('.handicap').change(function()
 {
  var val = $(this).val();

  if(val == 'a')
  { 
   $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>');
  }
  else 
  {
   $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>')
  }
 });
});
</script>

我希望当我选择元素时，将根据选择值显示。而且当我添加新的选择标签时，元素将根据选择值显示

标签： javascript

解决方案

$(document).ready在 DOM 加载时第一次触发。所以当时只有一个节点和事件 id 绑定到该节点。添加新节点时，不会添加更改事件$(document).ready。你必须像我在你的$('#sigepapa').click监听器中那样绑定它。

此外，您必须为最初存在的每个选择标签以及使用克隆创建的每个选择标签提供独立的输入。$('#ahh')因此，您可以将ahh其用作类名，而不是使用 id 选择元素。因为这些元素会出现不止一次。Id 应该是唯一的，因此最好为此目的使用类。

可以在更改选择标记时选择此节点作为选择的next元素。可以使用event.targetfrom change 事件接收此选择。该特定元素将$(e.target).next('.ahh')在这种情况下

工作小提琴

$("#sigepapa").click(function () {
  var ako = "";
  ako += '<select class="handicap">';
  ako += '<option value="a">Example 1</option>';
  ako += '<option value="b"> Example 2</option>';
  ako += "</select>";
  
  ako += '<div class="ahh">';
  ako += '<div class="row">';
  ako += '<div class="inputs">';
  ako += "</div>";
  ako += "</div>";
  ako += "</div>";

  $("#ugh").append(ako);
  bindEvents();
});

function bindEvents() {
  $(".handicap").change(function (e) {
    var val = $(this).val();
    if (val == "a") {
      $(e.target).next('.ahh').html(
        '<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>'
      );
    } else {
      $(e.target).next('.ahh').html(
        '<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>'
      );
    }
  });
}

$(document).ready(function () {
  bindEvents();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="ugh">
  <select class="handicap">
    <option value="a">Example 1</option>
    <option value="b">Example 2</option>
  </select>
  <div class="ahh">
    <div class="row">
      <div class="inputs"></div>
    </div>
  </div>
</div>
<a id="sigepapa" class="fa fa-clone">Clone</a>

推荐阅读