当我使用jQuery追加方法

时间:2018-02-24 03:40:04

标签: javascript jquery css angularjs materialize

我使用materialize css作为我的项目,当我想在materialise select中添加选项时我遇到了问题。

请查看我的代码段并进行必要的更改以帮助我.Thankyou



$(document).ready(function() {
  $("#condition").click(function() {
    $('#shw').append($('.hidden').clone().removeClass("hidden"));
  });
});
$(document).ready(function() {
  $("#delete").click(function() {
    $('.hidden').remove();
  });
});

.hidden {
  display: none
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="hidden">
  <fieldset>
    <table class='addRuleHolder'>
      <tr>
        <td class="label-col">
          <label>Sensor:</label>
        </td>
        <td>
          <select>
            <option value="1">S1</option>
            <option value="2">S2</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Condition:</label>
        </td>
        <td>
          <select>
            <option value="1">&lt;=</option>
            <option value="2">&gt;=</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Threshold Value:</label>
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
    </table>
<button  class="waves-effect waves-light btn" id="delete" >delete</button>
  </fieldset>
</div>


<div style="margin-top: 20px; float:right;padding-right:15px">
  <button class="waves-effect waves-light btn" id="condition" value="Add">condition</button>
</div>
<br style="clear:both"/>
<div id="shw"></div>
&#13;
&#13;
&#13;

感谢您的帮助,抱歉我的英语不好。

2 个答案:

答案 0 :(得分:1)

这是select

的工作脚本
$(document).ready(function() {
 $('select').attr("class", "browser-default")
});

要删除div,下面是脚本

   $('#shw').on('click', '#delete', function(e) {
e.preventDefault();
$(this).parent().remove();
});  

答案 1 :(得分:0)

您甚至应该删除在删除时附加的div,否则它将无法正常工作。