动态更改元素的id

时间：2018-06-25 07:05:02

标签： jquery html 

 <div class="wrap-input100 input100-select bg1">
                <span class="label-input100">Year *</span>
                <div>
                    <select class="js-select2" id="year0" name="year[]" onchange="selectMake()" >
                        <option value="">Please chooses Year</option>
                        <option>2018</option>
                        <option>2017</option>
                    </select>
                    <div class="dropDownSelect2"></div>
                </div>
            </div>



            <div class="wrap-input100 input100-select bg1">
                <span class="label-input100">Make *</span>
                <div>
                    <select class="js-select2" id="make0" name="make[]" onchange="selectModel()">
                        <option value="">Please chooses Make</option>
                    </select>
                    <div class="dropDownSelect2"></div>
                </div>
            </div>
 <div class="wrap-input100" id="add_vehical_section"> </div>

            <div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
                <div class="contact100-form-btn" id="add_vehical">
                    <span>
                        Add another Vehicle
                        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
                </div>
            </div>

这是我的html代码

 <script>
 var i=0;
     function selectMake() 
     {
    $("#year"+ i +"").change(function () 
    {
        var y = $(this).val();
        if(y == "2018") 
        {
            $("#make"+ i +"").html("<option value='make1'>make 1</option><option value='make2'>make 2</option>");
        } 
        else if(y == "2017")
        {
            $("#make"+ i +"").html("<option value='make3'>make 3</option><option value='make4'>make 4</option>");
        } 
    }
);} </script>
            <script>
 var i=1;
 $("#add_vehical").click(function () {  
 $( "#add_vehical_section").replaceWith("<div class='wrap-input100 input100- 
 select bg1'><span class='label-input100'>Year *</span><div><select 
 class='js-select2' id='year"+ i +"' name='year[]' onchange='selectMake()'> 
 <option value=''>Please choose Year</option> <option>2018</option> 
 <option>2017</option></select><div class='dropDownSelect2'></div></div> 
 </div><div class='wrap-input100 input100-select bg1'><span class='label- 
  input100'>Make *</span><div><select class='js-select2' id='make"+ i +"' 
   name='make[]' onchange='selectModel()'><option value=''>Please chooses 
  Make</option></select><div class='dropDownSelect2'></div></div></div>");  
 i++;
 });

 </script>

这是我的JavaScript。 我需要更改年份的ID，并使每次单击添加的车辆。该程序根据第一次选择的值更改第二次选择标签的值。我的代码有什么问题？为了使功能selectMake（）工作，需要使用不同的ID。我的代码出了什么问题？请帮帮我。

2 个答案:

答案 0 :(得分：3)

您不应依赖动态的 id 来附加事件处理程序。动态生成元素时，可以利用.on()方法的Event Delegation方法。

学会使用DOM遍历方法，即.closest()，.parents() ...来定位所需的元素，而不是依靠ID选择器来定位元素。

在此示例中，我创建了一个hiddenContiner div以提取需要附加的HTML。

$("#add_vehical").click(function() {
  $('.hiddenContiner')
    .clone() //Clone node
    .removeClass('hiddenContiner') //remove class
    .addClass('container') //add class
    .appendTo('.selectContiner'); //Append to common conatiner
});

$('.selectContiner').on('change', '.year', function() {
  var y = $(this).val();
  var make = $(this)
    .closest('.container') //Travse up to common parent
    .find('.make'); //target make element
  if (y == "2018") {
    make.html("<option value='make1'>make 1</option><option value='make2'>make 2</option>");
  } else if (y == "2017") {
    make.html("<option value='make3'>make 3</option><option value='make4'>make 4</option>");
  }
});

$('.selectContiner').on('change', '.make', function() {
  var make = $(this).val();
  //Do your thing
  
});
.hiddenContiner {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectContiner">
  <div class="hiddenContiner">
    <div class="wrap-input100 input100-select bg1">
      <span class="label-input100">Year *</span>
      <div>
        <select class="js-select2 year" name="year[]">
          <option value="">Please chooses Year</option>
          <option>2018</option>
          <option>2017</option>
        </select>
        <div class="dropDownSelect2"></div>
      </div>
    </div>
    <div class="wrap-input100 input100-select bg1">
      <span class="label-input100">Make *</span>
      <div>
        <select class="js-select2 make" name="make[]">
          <option value="">Please chooses Make</option>
        </select>
        <div class="dropDownSelect2"></div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="wrap-input100 input100-select bg1">
      <span class="label-input100">Year *</span>
      <div>
        <select class="js-select2 year" name="year[]">
          <option value="">Please chooses Year</option>
          <option>2018</option>
          <option>2017</option>
        </select>
        <div class="dropDownSelect2"></div>
      </div>
    </div>
    <div class="wrap-input100 input100-select bg1">
      <span class="label-input100">Make *</span>
      <div>
        <select class="js-select2 make" name="make[]">
          <option value="">Please chooses Make</option>
        </select>
        <div class="dropDownSelect2"></div>
      </div>
    </div>
  </div>
</div>

<div class="wrap-input100" id="add_vehical_section"> </div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <div class="contact100-form-btn" id="add_vehical">
    <span> Add another Vehicle  <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
  </div>
</div>

答案 1 :(得分：1)

您可以这样操作：https://codepen.io/creativedev/pen/rKrMVV

在 selectMake 函数中

传递了所选值，因此您既可以获取值也可以获取ID。取得ID后，只需将其与数字值匹配，然后将其分配给 #make _

JS 

var i = 0;

function selectMake(e) {
    var matches = $(e).attr('id').match(/\d/);
    var y = $(e).val();
    if (matches === null) {
        var i = '';
    } else {
        var i = matches[0];
    }
    if (y == "2018") {
        $("#make" + i + "").html("<option value='make1'>make 1</option><option value='make2'>make 2</option>");
    } else if (y == "2017") {
        $("#make" + i + "").html("<option value='make3'>make 3</option><option value='make4'>make 4</option>");
    }
}
var i = 1;
$("#add_vehical").click(function() {
    $("#add_vehical_section").replaceWith("<div class='wrap-input100 input100-select bg1'><span class='label-input100'>Year *</span><div><select  class='js-select2' id='year" + i + "' name='year[]' onchange='selectMake(this)'> <option value=''>Please choose Year</option> <option>2018</option>  <option>2017</option></select><div class='dropDownSelect2'></div></div> </div><div class='wrap-input100 input100-select bg1'><span class='label-input100'>Make *</span><div><select class='js-select2' id='make" + i + "' name='make[]' onchange='selectModel()'><option value=''>Please chooses Make</option></select><div class='dropDownSelect2'></div></div></div>");
    i++;
});

HTML 

<div class="wrap-input100 input100-select bg1">
                <span class="label-input100">Year *</span>
                <div>
                    <select class="js-select2" id="year" name="year[]" onchange="selectMake(this)" >
                        <option value="">Please chooses Year</option>
                        <option>2018</option>
                        <option>2017</option>
                    </select>
                    <div class="dropDownSelect2"></div>
                </div>
            </div>



            <div class="wrap-input100 input100-select bg1">
                <span class="label-input100">Make *</span>
                <div>
                    <select class="js-select2" id="make" name="make[]" onchange="selectModel()">
                        <option value="">Please chooses Make</option>
                    </select>
                    <div class="dropDownSelect2"></div>
                </div>
            </div>
 <div class="wrap-input100" id="add_vehical_section"> </div>

            <div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
                <div class="contact100-form-btn" id="add_vehical">
                    <span>
                        Add another Vehicle
                        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
                </div>
            </div>
相关问题
最新问题