jQuery: как сделать кнопку очистки? - PullRequest
Новая
       15

jQuery: как сделать кнопку очистки?

4 голосов
/ 13 октября 2010

У меня есть поле поиска, и мне нужна кнопка очистки.

У меня есть кнопка, но я не знаю, как это сделать,

У меня 6 текстовых полей,2 комбинированных списка и 2 списка множественного выбора

Как очистить их все в одной функции ??Я знаю способ HTML, но я использую Grails и type = "reset" не работает.Вот почему я хочу jQuery-способ удаления значений текстовых полей, оставляя поле со списком в первом индексе и очищать все опции из списка множественного выбора.

Спасибо за помощь: D

Ответы [ 3 ]

8 голосов
/ 13 октября 2010

Если у вас есть форма, просто добавьте ввод с типом reset

<input type="reset" value="Clear the Form" />

Если вы не можете использовать это, сохраните значения по умолчанию с помощью .data и получите их при сбросеform.

См. этот пример на jsFiddle 

$("#container :text").each(function() {
    var $this = $(this);

    $this.data("default", $this.val());
});

$("#container select option").each(function() {
    var $this = $(this);

    $this.data("default", $this.is(":selected"));
});

$("#container :button").click(function() {
    $("#container :text").each(function() {
        var $this = $(this);
        $this.val($this.data("default"));
    });

  $("#container select option").each(function() {
      var $this = $(this);
      $this.attr("selected", $this.data("default"));
  });
});

HTML 

<div id="container">
    <input type="text" value="default" />
    <select>
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>
    <select multiple="true" size="5">
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>

    <input type="button" value="reset" />
</div>

Очистить всевводит и удаляет все опции для select элементов, это более просто, см. этот пример на jsFiddle (тот же HTML). 

$("#container :button").click(function() {
    $("#container :text").val("");

    $("#container select").empty();
});
7 голосов
/ 13 октября 2010

Вы можете изменить код ниже, чтобы удовлетворить ваши потребности.Это украдено из этой темы в любом случае.

jsfiddle 

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

<form id='myform'>
    <input type='text' value='test' />
    <select id='single'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <select multiple="true" size="5" id='multiple'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <input type='button' id='reset' value='reset' />
</form>

РЕДАКТИРОВАТЬ (очистить множественный выбор): 

$('#reset').click(function(){
    $(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

    $("#myform #multiple").empty();
});​

jsfiddle v2

1 голос
/ 13 октября 2010

Используйте Ли Си Эн решение, которое он нашел на SO.Это намного лучше и обо всем позаботится.

$('#myClearButton').click(function() {
  $('#myTextBox').val('');

  $('#myComboBox').val('0'); // set to default value as an example i use 0 
});
...