具有大小屬性​​的選擇框運行更改功能

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>

該組合如下圖所示：

當combobobs建立時，此功能正常工作。但是我想同時顯示所有選項。 但我不想使用多個選項選擇。 這樣我就使用了如下尺寸選項：

<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時不會觸發該功能。 當我刪除此大小，然后觸發功能。

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

Answer 1

你的JavaScript函數不應該在所有登錄任何東西，因為它有一個語法錯誤。 $(.names)需要在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> 

我在這里制作了一個小提琴來展示這一點 。

希望這可以幫助！