在下拉列表中获取选定的值并将其放入其他下拉列表中？

Question

This is my script :

function myFunction() {
    var x = document.getElementById("mySelect").value;
    var xtest = x.split("|");
    x = xtest[1];
    document.getElementById("demo").innerHTML = x;
    var text = $('#demo').html();
    $('#texted').val(text);
}

$(document).ready(function() {
    myFunction();
    $("#mySelect").change(function() {
        myFunction();
        sum();
    });
    sum();
    $("#num1, #texted").on("keydown keyup", function() {
        sum();
    });
    $("#num1").mouseup(function() {
        sum();
    });
});

function sum() {
    var num1;
    num1 = document.getElementById('num1').value;
    document.getElementById('sum').value = num1;
    var texted = document.getElementById('texted').value;
}

this is from where i'm getting the value type (text)

echo"<select name='id_type' id='mySelect' onchange='myFunction()' class='form-control select' data-live-search='true'>";
foreach($data as $r){
echo"<option value=".$r['id_type']."|".$r['libelle'].">".$r['libelle']."</option>";
}
echo"</select>";

<p id="demo"></p>

this is where i want to put the value that i have selected

echo"<select name='echange' id='texted' class='form-control select' data-live-search='true'>";
foreach($data as $r){
echo"<option value=".$r['id_annee'].">".$r['libelle']."</option>";
}
echo"</select>";

PS the purpose of this method is to make it easy to find specific data in the last select

Answer 1

It's fine to build each list using PHP, but you'll definitely want to use JavaScript to manipulate the values of each list. For example (I'm going to use straight JS here) you could do something like this

list1 = document.getElementById("mySelect");
list2 = document.getElementById("texted");

list1.onblur = function() {
    list2.value = list1.options[list1.selectedIndex].value;
    //add option
    var opt = document.createElement('option');
    opt.value = list1.options[list1.selectedIndex].value;
    opt.innerHTML = list1.options[list1.selectedIndex].value;
    list2.appendChild(opt);
}