Options from select with Closest

Asked

Viewed 60 times

1

How do I get all options tags (html and values) with 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>

I’m trying like this:

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

But it’s not working

javascript jquery

  • He’s trying to get the <options> within the <div> ?

  • yes, I made a change in the codes of my question, to better understand

  • is just what I want to do see this part of the code: append($('<select name='algumName'>"+ options +"</select>'));

  • Yes I was writing the moment I was changing

  • @Gislef you only want the html of the options? for example, <option value="1">1</option>...?

1 answer

1


To get the options you have just change the selector of the Jquery for $("#test>option") that picks up all the labels <option> within the <select> test.

However for in your case it is much easier to get the html of <select> whole and use in the placement within the <div>:

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

Notice I also put some + that were missing in select name='algumName'

Example:

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

This server function to scroll the DOM tree up and pick up the nearest element that plays with the nominee. Search begins in the element itself.

In the code you used, $(this).closest('#test'), would catch the element #test if above, but still not solving the problem.

Illustrating a simple use of 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>

Here $("#p1").closest("h1") catches the <h1> closest to <p>, which is exactly above.

html can be more complex than closest tried in the same to catch some element, going through all the elements above until reaching the top:

$("#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>

In this last example was made the closest for a <div>, trying to catch the <div> closest to <p> which is what is two levels up. We can see that it was the one where the color was assigned due to the larger size that was given in this example.

  • Finally got it, excellent! Thank you very much Isac

  • Isac, for example $(this).closest('th').next('td').next('td').next('td').next('td').next('td').text(); With this code I am able to access the text of the 5 column in the row of a table. It is possible to minimize these 5 next('td')? Currently to get the value of each column I enter the amount of next('td') necessary

  • @Gislef You better give me an example of the type of html you have to be able to give a good solution. For minimally complex navigation of this genre it is better to use the parent() and the find(). With so much next() too much force the structure and it is easy to break if someone changes something in html.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.