0

Tenho o seguinte HTML:

<select class="estados" name="estado">
    <option class="op1" value="">1</option>
    <option class="op2" value="">1</option>
    <option class="op3" value="">1</option>
</select>
<input type="reset" class="bt" value="refazer"/>

Digamos que eu selecionei o 3 option op3, quando eu clicar no input class="bt" quero que ele deixe marcado a 1ª opção op1.

Tenho que usar o selected do Jquery?

4 Respostas 4

3

Se você já souber o valor, dá para setá-lo diretamente pelo val().

$("input.bt").on("click", function () {
    // no seu exemplo você não colocou nenhum value
    // nas options, mas aqui iria o value desejado
    $("select[name=estado]").val("valorNaOpcao1");
});

Se quiser selecionar sempre o primeiro, pode ser assim.

$("input.bt").on("click", function () {
    var $select = $("select[name=estado]");
    var $firstOption = $select.find("option:first-child");
    $select.val($firstOption.val());
});

ou

$("input.bt").on("click", function () {
    $("select[name=estado]").val($("select[name=estado] option:first-child").val());
});
1

Você pode usar os métodos attr e removeAttr.

Desse jeito:

$(".bt").click = function () {
  $(".op1").attr("selected", "selected");
  $(".op2").removeAttr("selected");
  $(".op3").removeAttr("selected");
};

E para ajudar a diferenciar a opção selecionada, faça assim:

<select class="estados" name="estado">
  <option class="op1" value="">1</option>
  <option class="op2" value="">2</option> <- Alteração do valor dentro da tag
  <option class="op3" value="">3</option> <- Alteração do valor dentro da tag
</select>
2
  • ah entendi, o que acontece é que os outros options serão gerenciáveis, esqueci de citar isso 28/01/2015 às 11:39
  • Como assim? Não entendi...
    – mutlei
    28/01/2015 às 11:40
1

Basta usar a função prop() para setar a opção como marcada ao clicar no botão.

$(".bt").click(function() {
  $(".op1").prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="estados" name="estado">
    <option class="op1" value="">1</option>
    <option class="op2" value="">2</option>
    <option class="op3" value="">3</option>
</select>
<input type="reset" class="bt" value="refazer"/>

1

Se quiseres fazer um "reset", ou seja voltar ao valor inicial podes fazer assim:

jsFiddle: http://jsfiddle.net/suhjnxaj/

$(".bt").on("click", function () {
    $("select.estados option").prop('selected', function() {
        return this.defaultSelected;
    });
});

Se quiseres forçar o primeiro somente podes fazer assim:

jsFiddle: http://jsfiddle.net/suhjnxaj/1/

$(".bt").on("click", function () {
  $("select.estados option").each(function(i){
      $(this).removeAttr("selected");
      if (i == 0) this.selected = true; // onde o "i" é o index desse select, começando em zero
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .