從數據列表中選取的查看選項

Question

我想選擇用戶從數據列表中選擇的選項。 這就是我所擁有的：

<input type="text" name="my-input" class="searchBar" list="my-list">          
  <input id="clickMe" type="button" value="clickme" onclick="handleSelect();" />
  <datalist id="my-list">
        <option value="COMP232"></option>
        <option value="COMP248"></option>
        <option value="ENGR201"></option>
  </datalist>   

我的JS方法：

function handleSelect()
        {
            var elm = document.getElementById("my-list").innerHTML.value;
            console.log(elm);
            //window.location = "./class/" + elm.toUpperCase() + ".php";
        }

當我提交時，控制台響應“未定義”。 這里有什么問題？

Answer 1

您可以為 input 分配一個id並在單擊按鈕時獲取id的值。

<input id= "inp" type="text" name="my-input" class="searchBar" list="my-list">          
<input type="button" value="clickme" onclick="handleSelect();" />
                      <datalist id="my-list">
                            <option value="COMP232"></option>
                            <option value="COMP248"></option>
                            <option value="ENGR201"></option>
                      </datalist>  

和 JS 代碼片段看起來像，

var elm = document.getElementById("inp").value;

Answer 2

你的代碼應該是這樣的。

<script>
function handleSelect(){
    var elment = document.getElementById("selectedValue").value;
    console.log(elment);    
}

</script>
<input id="selectedValue" type="text" name="my-input" class="searchBar" list="my-list">
<input id="clickMe" type="button" value="clickme"
    onclick="handleSelect();" />
<datalist id="my-list">
    <option value="COMP232"></option>
    <option value="COMP248"></option>
    <option value="ENGR201"></option>
</datalist>