1

Como faço para pegar todas tags de options (html e valores) com jquery

         <select id="test" name"algumName">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
        </select>


<div id="dv">

</div>

Estou tentando assim:

var options = $(this).closest('#test');
$('#dv').append($('<select name='algumName'>"+ options +"</select>'));

Mas não esta dando certo

5
  • Está a tentar colocar os <options> dentro do <div> ?
    – Isac
    Commented 22/09/2017 às 0:36
  • sim, eu fiz uma alteração nos codigos da minha pergunta, para entender melhor
    – Gislef
    Commented 22/09/2017 às 0:43
  • é justamente o que quero fazer veja essa parte do codigo: append($('<select name='algumName'>"+ options +"</select>'));
    – Gislef
    Commented 22/09/2017 às 0:45
  • Sim estava a escrever no momento que estava a alterar
    – Isac
    Commented 22/09/2017 às 0:45
  • @Gislef você quer somente o html dos options? por exemplo, <option value="1">1</option>...?
    – haykou
    Commented 22/09/2017 às 0:56

1 Resposta 1

1

Para obter os options que tem basta apenas alterar o seletor do Jquery para $("#test>option") que apanha todas as etiquetas <option> dentro do <select> test.

No entanto para no seu caso é bem mais fácil apanhar o html do <select> todo e utilizar na colocação dentro do <div>:

$('#dv').append('<select name=' + algumName + '>' + $("#test").html() + '</select>');

Repare que também coloquei uns + que faltavam em select name='algumName'

Exemplo:

let algumName = "nome";

$("button").click(function() {
  $('#dv').append('<select name=' + algumName + '>' + $("#test").html() + '</select>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" name "algumName">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
        </select>

<button>Copiar opções</button>

<div id="dv">

</div>

Closest

Esta função server para percorrer a arvore DOM para cima e apanhar o elemento mais próximo que jogue com o indicado. A pesquisa começa no próprio elemento.

No código que utilizou, $(this).closest('#test'), iria apanhar o elemento #test caso esse esteja acima, mas continuava a não resolver o problema.

Exemplificando uma utilização simples do closest:

$("#p1").closest("h1").css('background-color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>
  <p id="p1">texto p1</p>
</h1>

Aqui $("#p1").closest("h1") apanha o <h1> mais próximo de <p>, que é o que está exatamente acima.


O html pode ser mais complexo que o closest tentara na mesma apanhar algum elemento, passando por todos os elementos acima até chegar ao topo:

$("#p1").closest("div").css('background-color','red');
div {
  height:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <h1>
    <p id="p1">texto p1</p>
  </h1>
</div>

Neste ultimo exemplo foi feito o closest para um <div>, tentando apanhar o <div> mais próximo de <p> que é o que está dois níveis acima. Conseguimos ver que foi esse onde foi atribuída a cor devido ao tamanho maior que lhe foi dado neste exemplo.

3
  • Finalmente entendi, excelente! Muito obrigada Isac
    – Gislef
    Commented 22/09/2017 às 1:27
  • Isac, por exemplo $(this).closest('th').next('td').next('td').next('td').next('td').next('td').text(); Com este código estou conseguindo acessar o texto da 5 coluna na linha de uma tabela. Tem como minimizar esses 5 next('td')? Atualmente pra pegar o valor de cada coluna eu insiro a quantidade de next('td') necessarias
    – Gislef
    Commented 22/09/2017 às 3:42
  • @Gislef É melhor dar me um exemplo do tipo de html que tem para conseguir dar uma solução boa. Para navegação minimamente complexa desse gênero é melhor utilizar o parent() e o find(). Com tanto next() força demasiado a estrutura e fica fácil de quebrar se alguém trocar algo no html.
    – Isac
    Commented 22/09/2017 às 9:41

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 .