選擇框運行更改功能與大小屬性

Question

我正在使用選擇框。我使用的選擇框狀如下：

 <select name="cars" onchange="jsFunction()"> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="fiat">Fiat</option> 
      <option value="audi">Audi</option> 
      </select> 

    <script> 
    function jsFunction(){ 
     console.log($(.names).val()); 
    } 
    <script> 

的組合體被看起來像如下：

此功能工作時，comboboz是chenged.But我想顯示在所有選項同一時間。但我不想使用多個選項選擇。所以，我用大小選項類似如下：

<select name="cars" size="4" onchange="jsFunction()"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="fiat">Fiat</option> 
     <option value="audi">Audi</option> 
</select> 

然後選擇框看起來像如下：

而且只有只有一個選項可以選擇。但我的問題不是工作功能。當我使用size屬性時，然後當selectbox改變時，函數不會被觸發。當我刪除這個大小，然後功能被觸發。

如何在不使用大小屬性的情況下同時顯示所有選項（不帶多選）？或者我怎樣才能觸發此功能的大小屬性？

Answer 1

您的JavaScript函數不應該記錄任何東西全部，因爲它有語法錯誤。 $(.names)需要names左右的報價。此外，它需要反映您的<select>的class。

首先，你需要的類names添加到您的選擇：

<select name="cars" size="4" class="names" onchange="jsFunction()"> 

然後加引號的jQuery的DOM目標：

console.log($('.names').val()); 

這裏的新代碼：

function jsFunction() { 
 
    console.log($('.names').val()); 
 
}

<select name="cars" size="4" class="names" onchange="jsFunction()"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="fiat">Fiat</option> 
 
    <option value="audi">Audi</option> 
 
</select>

我創建了一個小提琴展示此here。

希望這會有所幫助！