jquery - 如何让以前的条目不重新填充模态文本字段

Question

必须有一个简单的方法来做到这一点，但我已经尝试了我能想到的一切（这可能不会说太多）。我有一个模式，在表单的下拉列表中选择“添加新”选项时会弹出​​。第一次弹出占位符出现，这就是我想要的。但在那之后，最后输入的值出现而不是占位符。我怎样才能让占位符每次都出现？

这是jQuery：

      <script type="text/javascript">

        var Classofentry = '';

        $('#add-new-text').val() === ''; // Set input text field to blank
        console.log($('#add-new-text').val()); // <--------------- This is filled

        $('#upload_form option[value="addnew"]').click(function(){

              // Show modal window
              $('#add-new').modal('show');

              // Get the class
              var Classofentry = $(this).attr("class");
              //console.log(Classofentry);

              //$('#add-new-submit').val() == ''; // Set input text field to blank
              //console.log($('#add-new-submit').val()); // <------------- Empty after first change

              //$('#add-new-text').val() === ''; // Set input text field to blank
              console.log($('#add-new-text').val()); // <--------------- This is filled
              $('#add-new-submit').on('click', function(){                

                  // Get new option from text field
                  var value = $('#add-new-text').val();
                  //console.log(value);

                  $.ajax({
                        type: "POST",
                        url: "<?php echo site_url(); ?>main/change_options",
                        data: {new_option: value, new_option_class: Classofentry},
                        //dataType: "html",
                        dataType: "json",
                        error: errorHandler,
                        success: success
                      });

                  function success(data)
                  {

                      if (data[1])
                      {
                        // Add new entry
                        $('#'+Classofentry).append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>");
                        //alert(data[1]);
                      }
                      else
                      {

                        // Select the nonunique value by emptying it and appending
                        $('#'+Classofentry).empty("<option value=''selected=\"selected\">" + data[0] + "</option>").append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>");                                                          
                        //alert(data[0]);                             
                      }

                  }

                  function errorHandler()
                  {
                      //alert('Error with AJAX!');
                      alert(data[0]);
                  } 

                  $('#add-new-submit').unbind('click'); // This fixes the problem for multiple entries
                  $('#add-new').modal('toggle');                      

              });

              //$('#add-new-submit').unbind('click');

              //$('#upload_form option[value="addnew"]').unbind('click');
        });


  </script>

和模态：

  <!-- add-new field -->
  <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">√ó&lt;/button>
        <h3 id="add-new-fieldLabel">Add New Field</h3>
      </div>
      <div class="modal-body">

          <p>Would you like to add a new item?</p>
          <input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
      </div>
 </div><!-- /add-new field -->

如您所见，我尝试将 add-new-text 标记简单地设置为空白，但这是行不通的。有什么我可以在 html 中做的吗？

Answer 1

另一种可能的解决方案是从 DOM 中删除模态（我猜你还是把它隐藏在某个地方？），然后显示一个深度复制的克隆。例如：

// Remove the modal element from the rendered DOM, this should be
// done after you've attached any necessary event listeners
var $modalSource = $('#add-new').remove();

// Later on, when you need to pull up the modal
// Using clone(true) ensures that registered event listeners are also cloned
$modalSource.clone(true).modal('show');

现在，每次打开模式时，它都会显示一个新的克隆而不是原始的。这会将打开的模式返回到其 HTML 定义的状态，因此所有字段都将处于其原始状态。来自jQuery .clone() 文档：

.clone() 方法执行匹配元素集的深层复制，这意味着它复制匹配的元素以及它们的所有后代元素和文本节点。出于性能原因，表单元素的动态状态（例如，输入到输入中的用户数据，以及对选择进行的文本区域或用户选择）不会复制到克隆的元素中。克隆操作将这些字段设置为它们在 HTML 中指定的默认值。

从 DOM 中删除元素将确保使用任何 ID 的选择器仍按预期运行。

这里最好的一点是，无论模态中包含的元素如何，都可以使用此方法。因此，即使您有输入、文本区域、选择甚至自定义元素，它仍然可以工作。

然而，基于 HTML 和 JS 的其余部分，这个答案可能需要稍微调整一下。因此，如果您仍然遇到问题，请发布更多详细信息或提供正确说明您的问题的小提琴。

Answer 2

我认为你应该这样做

$('input').val('');

清除值;)