Can't copy Select value

Question

I-m trying to copy the value from one select to another. One has the value 'A' and the other has the value 'B'. Here's what I'm doing to achieve this:

$('#selectTipoInvervencion1').val($('#selectTipoIntervencion0').val());

However, my value is not getting copied. The weird thing is, I'm getting the elements correctly since after executing this line of code I can do:

console.log($('#selectTipoIntervencion0').val());
console.log($('#selectTipoIntervencion1').val());

and the output is:

A
B

which is what I expected since the value doesn't appear to be copied in the view but is obviously not what I want. How can I fix this?

Update: HTML

<select id="selectTipoIntervencion0" name="forms[0].model.intervenciones[0].tipo" class="selectTiposIntervencion">
    <option name="A_NAME" value="A" selected="selected">A</option>
    <option name="B_NAME" value="B">B</option>
    ...
</select>

<select id="selectTipoIntervencion1" name="forms[1].model.intervenciones[1].tipo" class="selectTiposIntervencion">
    <option name="A_NAME" value="A" selected="selected">A</option>
    <option name="B_NAME" value="B">B</option>
    ...
</select>

You don't want to copy the value, you want to select the current value - that's something different; try this link: https://stackoverflow.com/questions/1573930/jquery-programmatically-select-an-option-in-select-box — riffnl, Mar 16 '20 at 10:13
I just tried the answer in the link yo posted, still no luck unfortunately. I tried typing the value with / without quotes so it's not that either — David Antelo, Mar 16 '20 at 10:22

Jeni · Answer 1 · 2020-03-16T10:27:41.507

Try this,

$('#selectTipoInvervencion0 option').clone().appendTo('#selectTipoIntervencion1');

Javascript: How to copy all options from one select element to another?

    function copyOption() {
       $('#selectTipoIntervencion1 option').clone().appendTo('#selectTipoIntervencion0');
     }

    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="selectTipoIntervencion0" name="forms[0].model.intervenciones[0].tipo" class="selectTiposIntervencion">
        <option name="A_NAME" value="A" selected="selected">A</option>
        <option name="B_NAME" value="B">B</option>          
     </select>
            
   <select id="selectTipoIntervencion1" name="forms[1].model.intervenciones[1].tipo" class="selectTiposIntervencion">
        <option name="A_NAME" value="A" selected="selected">A1</option>
        <option name="B_NAME" value="B">B2</option>
   </select>
            <button onclick="copyOption()">Copy</button>

Btw, funny thing is, my whole form is already a copy of the last one. I create this new form by cloning the last one. All values are copied correctly except for the selects — David Antelo, Mar 16 '20 at 10:35
you mean select values are not cloning correctly, please check here https://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values — Jeni, Mar 16 '20 at 10:42

Pushpendra Kumar · Answer 2 · 2020-03-16T10:36:28.137

Try this

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <select id="selectTipoIntervencion0" name="forms[0].model.intervenciones[0].tipo" class="selectTiposIntervencion">
            <option name="B_NAME" value="B">B</option>
            <option name="A_NAME" value="A">A</option>
        </select>

        <select id="selectTipoIntervencion1" name="forms[1].model.intervenciones[1].tipo" class="selectTiposIntervencion">
            <option name="A_NAME" value="A">A</option>
            <option name="B_NAME" value="B">B</option>
            <option name="C_NAME" value="C">C</option>
            <option name="D_NAME" value="D">D</option>
            <option name="E_NAME" value="E" selected="selected">E</option>
            <option name="F_NAME" value="F">F</option>
            <option name="G_NAME" value="G">G</option>
            <option name="H_NAME" value="H">H</option>
        </select>
        <button type="button" id="cp">Copy</button>

        <script type="text/javascript">
            $("#cp").on('click', (evt) => {
                let a = $("#selectTipoIntervencion1").children("option:selected");
                $("#selectTipoIntervencion0").html(a);
            })
        </script>
    </body>
</html>

Still nothing. Besides my objective is not to change the second select whenever the first one changes, just when it is created. Thanks for the answer anyway — David Antelo, Mar 16 '20 at 10:29
Ok, now at least the option is changing! Gotta modify the script a bit but this might work, thanks! Will report back when I have updated the script — David Antelo, Mar 16 '20 at 10:43

Can't copy Select value

2 Answers2