功能需要等到选择标签的值被选中

Question

我在main.js中有一个功能需要等待，直到在select标记上选择了某些选项。据此，我将更新该元素。我尝试使用addlistenerevent来完成此操作，但是我无法成功。有什么建议么？我做错了吗？

var test = function()  {
    const langOptions = {
        dummy: 0,
        one: 5,
        two: 8,
        three: 2
    };
    var unit_1 = 1; 
    var selectSource ="";
    var selectTarget = "";

    var section = document.getElementById("unit");
    var span_1 = '<span>Unit : </span>';
    section.insertAdjacentHTML("beforeend", span_1);
    var span_2 = '<span id= "span_2">' + unit_1 +'</span>';
    section.insertAdjacentHTML("beforeend", span_2);
    
    document.getElementById('source-lang').addEventListener('change', function() {
        selectSource = $('source-lang').find('select').val();
        for (const key of Object.keys(langOptions)) {
            if (key === selectSource || key === selectTarget) { unitPrice *= langOptions[key];}
        }
        var element = document.getElementById('span_2').innerHTML = unit_1;
    });

    
};
test();

<div id="langs">
                <section class="container">
                    <div class="dropdown">
                        <select id="source-lang" style="background-color:#5e3080"  name="source-lang">
                            <option value="">Select</option>
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                        </select>
                    </div>
                    <div class="dropdown">
                        <select id ="target-lang" style="background-color:#5e3080" name="target-lang">
                            <option value="">Select</option>
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                        </select>
                    </div>
                    <div class="dropdown">
                        <div id="unit"></div>
                    </div>
                </section>      
            </div> 

Answer 1

我认为您正在寻找的是onchange Event

function selectOne() {
  const id = 'selectOne';
  console.log(id, document.getElementById(id).value);
}

document.getElementById('selectTwo').addEventListener("change", function() {
  console.log(this.id, this.value)
});

<p>Select One</p>
<select id="selectOne" type="text" onchange="selectOne()">
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>

<!-- Or using addEventListener -->
<p>Select Two</p>
<select id="selectTwo" type="text">
  <option value=a>a</option>
  <option value=b>b</option>
  <option value=c>c</option>
</select>

Answer 2

使用onchange Event

<select id="source-lang" style="background-color:#5e3080"  name="source-lang" onchange="test()">

<select id ="target-lang" style="background-color:#5e3080" name="target-lang" onchange="test()">