jQuery追加元素并替换选定的行

Question

如何更改选定行的元素？

​

当我的组合框被更改时，我想检查组合框的值。如果选择了“性别”的值，那么我想将“输入值Ke-3”文本框值替换为：

<select id="data3" name="data3[]">
     <option value="man" selected >Man</option>
     <option value="woman">Woman</option>
</select>

这是否可以使用$.(选择器).html()来完成？

我的代码：

$(document).ready(function() {
    MyLogic();
});

function MyLogic(){
  $(".addCF").click(function(){
      $("#customFields").append(
          '<tr>'
            + '<td>'
                    + '<select class="tabelBaru" id="data1" name="data1[]">'
                            + '<option value="email" selected >Email</option>'
                            + '<option value="gender">Gender</option>'
                            + '<option value="age">Age</option>'
                    + '</select>&nbsp;'
            + '</td>'
            + '<td>'
                + '<input type="text" id="data2" name="data2[]" value="" placeholder="Input Value Ke-2" />'
            + '</td>'
            + '<td>'
                + '<input type="text" id="data3" name="data3[]" value="" placeholder="Input Value Ke-3" />'
            + '</td>'
            + '<td>'
                + '<a href="javascript:void(0);" class="remCF">Remove</a>'
            + '</td>'
        + '</tr>'
      );
  });

    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    }); 

    $(document.body).on('change', '.tabelBaru', function() {
        var nilai = $(this).val();
        if(nilai=='email'){
           $("#data3").html('Change another input type here...');
        }
    });
}

我该怎么做？

Answer 1

首先，不要使用重复的ids。使用类代替。

添加这样的更改处理程序：

$("#customFields").on('change', '.tabelBaru', function() {
        var $this = $(this),
            nilai = $this.val();
        console.log(nilai);
        if(nilai=='gender'){
           $this.closest("tr").find(".data3").replaceWith('<select name="data3[]" class="data3">     <option value="man" selected >Man</option>     <option value="woman">Woman</option></select>'); //creating select
        }
        else {
            $this.closest("tr").find(".data3").replaceWith('<input type="text" name="data3[]" value="" placeholder="Input Value Ke-3" class="data3"/>'); 
        }
    });

http://jsfiddle.net/Tbt93/