Options from select to closest

1

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

    
asked by anonymous 22.09.2017 / 02:29

1 answer

1

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

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

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

Notice that I also put a% w / o of% missing in% w / o%

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><selectid="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 function server to move the DOM tree up and pick up the nearest element that plays with the indicated one. The search starts in the element itself.

In the code you used, + , would catch the element select name='algumName' if it is above, but it still did not solve the problem.

Exemplifying a simple use of $(this).closest('#test') :

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

Here #test gets the closest closest to $("#p1").closest("h1") , which is exactly what is above.

The html can be more complex than the <h1> tried in the same 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><pid="p1">texto p1</p>
  </h1>
</div>

In this last example we made <p> to closest , trying to get the closest closer to <div> which is what is two levels above. We were able to see that this was where the color was attributed due to the larger size given to it in this example.

    
22.09.2017 / 02:57