Select Box Running Change Function With Size Атрибут

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. Также необходимо указать class вашего <select>.

Сначала нужно добавить класс 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.

Надеюсь, это поможет!