0

これを行う簡単な方法があるに違いありませんが、私は考えられるすべてのことを試しました (おそらく多くは語られません)。フォームのドロップダウンで「新規追加」オプションを選択するとポップアップするモーダルがあります。初めてポップアップすると、プレースホルダーが表示されます。これは私が望むものです。ただし、その後は、プレースホルダーの代わりに最後に入力された値が表示されます。プレースホルダーを毎回表示するにはどうすればよいですか?

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でできることはありますか？

4

2 に答える 2

2

別の可能な解決策は、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 に基づいて、この回答を少し調整する必要がある場合があります。したがって、まだ問題が発生している場合は、詳細を投稿するか、問題を適切に説明するフィドルを提供してください。

于 2013-07-22T07:18:58.063 に答える
1

やるべきだと思います

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

値をクリアする;）

于 2013-07-22T02:14:43.157 に答える