Copy select and maintain selectedIndex

Asked

Viewed 112 times

0

I’m messing with a Select, where I select your index. The problem that after setting the index I have to put it inside a div.

Only it does not receive the index set, it goes with the default. What function of jquery, cut select with what was assigned to it, so I can insert what I want.

<select class="my">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="menor">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

$(document).ready(function() {
        $(".my, .menor").prop('selectedIndex', -1);     
        $(".my").after("<div class='maior'></div>").prependTo(".maior");
});

Ex: https://jsfiddle.net/6wxfaLwp/

javascript jquery

2 answers

1

You can use this to copy the index from one select to another:

var index = $(this).prop('selectedIndex'); // $(this) ou um seletor que dê o select original
$(".menor").prop('selectedIndex', index);  // $(".menor") ou um selector que dê o select de destino

An example: https://jsfiddle.net/qy73oc6r/

To insert the .menor inside a new div you can use the .wrap() jQuery with 

$(".my").wrap("<div class='maior'></div>");

An example of the two working together: https://jsfiddle.net/7w6zqrbL/

  • Thank you for helping. I could understand what you meant, but in my situation, it’s when you load ready() the page. Because I have to set it to copy in. I tried -1 and unsuccessfully: https://jsfiddle.net/7w6zqrbL/4/

  • @abcd so you want me to be left with no set option? like this? -> https://jsfiddle.net/7w6zqrbL/5/

  • It is a plugin, hence when the person loads, it can set as -1, or any other value, if it seven a number too high than the existing options it returns -1. Then I create below select a few Ivs (simulating a select), then play the select inside the parent div. After playing I try to pick up the options. I managed to accomplish what I wanted, by cloning and then taking the index of the main and playing for the cloned. ATT

  • @I’m sorry, but I still don’t understand what you want to do. I think you have a pretty clear idea, but you haven’t put enough information in here for anyone who doesn’t know your app to figure out what you want. I would like to improve my answer, but I need to understand it better. Otherwise the question and answer are not useful to anyone else :P

  • I added the answer to the topic, the way I managed to solve it. As I said, I cloned the main select and put it inside the DIV I created, then I took the selected index from the main select and I step it to the cloned select and then I remove the main select. I got your idea to go from a select

  • @abcd because you have 2 selects in HTML? it’s just for example or is that so in your app? which one is the main?

Show 1 more comment

0

This is how I did it:

Instead of just using prependTo, I cloned:

clone().prependTo()...

$(html).find("select").prop('selectedIndex', $(this).find(":selected").index());
$(this).remove();

Browser other questions tagged javascript jquery

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