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

Question

这是我的剧本：

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;
}

这是我从哪里获得值类型（文本）

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>

这是我想要放置我选择的值的地方

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>";

P.S此方法的目的是使在上一次选择中找到特定数据变得容易

Answer 1

使用PHP构建每个列表都很好，但您肯定希望使用JavaScript来操作每个列表的值。例如（我将在这里使用直接JS）你可以做这样的事情

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);
}