使用 Javascript 和 HTML 下拉 select

Question

我在使用 javascript 的下拉列表中的數據時遇到問題。 我希望它根據選擇的內容在頁面上打印出來，但是到目前為止，當他們 select 一個值時，什么都沒有發生。 我是javasript的新手，請幫助：

<form>
    <select name="abc" id="abc" onChange="check(this.form)">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
</form>
<script>
    function check (form){
        var letter = document.getElementsById("abc");
        var userLtr = letter.options[letter.selectedIndex].value;
        if (userLtr == "a"){
            document.write ("You selected A");
        }
        else if(userLtr == "b"){
            document.write ("You selected B");
        }
        else{
            document.write ("You selected C");
        }
    }
</script>

編輯：謝謝大家的幫助。 我已經想通了！！

Answer 1

<script>部分中的代碼僅在頁面准備好時執行。 您需要在 select 標簽和 function 上使用類似onchange的東西來處理它。 onchange 事件。 getDocumentId應該是getDocumentById ，您可以在此處查看相關文檔。

<select name="abc" id="abc" onchange="handleChange()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<script>
    function handleChange() {
      var letter = document.getElementById("abc");
      var userLtr = letter.options[letter.selectedIndex].value;
      if(userLtr == "a"){
         document.write("You selected A");
      }
    }
</script>

Answer 2

以下是您將如何執行此操作：

        <select name="abc" id="abc">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
        </select>

        <div id="text"></div>
        <script>
            document.getElementById("abc").onchange = function () {
                if (this.value === "a")
                {
                    document.querySelector("#text").innerHTML = "You selected A!";
                }
            };
        </script>

Answer 3

您忘記了“getElementById”中的“by”。

如果您添加一個鏈接到 javascript function 的 onchange 事件偵聽器，該偵聽器將寫入 div，然后您可以使用模板字符串來顯示選擇了哪個選項，如下所示。

 function changedFunc() { var letter = document.getElementById("abc"); var userLtr = letter.options[letter.selectedIndex].value; document.querySelector('#write-target').innerText =`You selected ${userLtr}`; } changedFunc();

 <select name="abc" id="abc" onchange="changedFunc()"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> <div id="write-target"></div>

Answer 4

除了getElementById上的錯字之外，您還應該向 select 元素添加一個事件偵聽器：

<script>
    var letter = document.getElementById("abc");
    letter.addEventListener('change', handleSelect) 
    function handleSelect(e) {
        var userLtr = letter.options[letter.selectedIndex].value;
        if(userLtr == "a"){
            document.write("You selected A");
        }
    }   
</script>