Работа с select и option

Question

Нужно при выборе конкретного select'a выводить разный текст.

Мой код

$(document).ready(function() {
    $('input[type=submit]').click(function() {
        selectUser = [$("#selectUser option:selected").val()];
        if (selectUser = 'user1') {
            alert('User 1');
        } else {
            alert ('Other user');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="GET">
  <select size="4" class="select-user" id="selectUser">
    <option disabled>Пользователи</option>
    <option value="user1">Пользователь 1</option>
    <option value="user2">Пользователь 2</option>
    <option value="user3">Пользователь 3</option>
    <option value="user4">Пользователь 4</option>
    <option value="user5">Пользователь 5</option>
  </select>
  <input type="submit" class="btn" id="btn">
 </form>

Я хочу обращаться к каждому значению selct'a, то бишь value и если выбран нужный value что-то делать. Пока у меня постоянно выводит user1. Как я понимаю, мое условие не сравнивает со значением value, а именно присваивает. Как сделать что бы оно сравнивало?

Answer 1

Можно получить вот так велью выбранного элемента селекта и внутри события уже писать условия

let select = document.querySelector('.select-user')

select.addEventListener('change', () => {
  console.log(select.options[select.selectedIndex].value)
})

<form action="" method="GET">
  <select size="4" class="select-user" id="selectUser">
    <option disabled>Пользователи</option>
    <option value="user1">Пользователь 1</option>
    <option value="user2">Пользователь 2</option>
    <option value="user3">Пользователь 3</option>
    <option value="user4">Пользователь 4</option>
    <option value="user5">Пользователь 5</option>
  </select>
  <input type="submit" class="btn" id="btn">
 </form>

Answer 2

В Javascript в условие if (сюда) {} необходимо класть либо true либо false
Что вы сделали:
Вы положили в условие результат присвоения переменной:

selectUser = 'user1'
if (selectUser) {
    тут какой-то код
} else {
    другой код при else
}

В данном случае javascript попытается привести переменную selectUser к булевой, true или false и на основании этого, сделает блок кода if или else

Если selectUser тут будет равняться строке с текстом, то приведя её к boolean, получится true, если будет пустая строка, то получится false

решение на jQuery:

$(document).ready(function() {
    $('input[type=submit]').click(function(e) {
        e.preventDefault();
        selectUser = $("#selectUser option:selected").val();
        if (selectUser === 'user1') {
            console.log('User 1');
        } else {
            console.log('Other user');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="GET">
  <select size="4" class="select-user" id="selectUser">
    <option disabled>Пользователи</option>
    <option value="user1">Пользователь 1</option>
    <option value="user2">Пользователь 2</option>
    <option value="user3">Пользователь 3</option>
    <option value="user4">Пользователь 4</option>
    <option value="user5">Пользователь 5</option>
  </select>
  <input type="submit" class="btn" id="btn">
 </form>

Vanilla JavaScript:

const form = document.querySelector('form#formSelectUser');
const selectUser = document.querySelector('select#selectUser.select-user');

form.addEventListener('submit', e => {
  e.preventDefault();
  const value = selectUser.value;
  if (value === 'user1') {
    console.log('Это user1');
  } else if (value === '') {
    console.log('Выберите нужного user');
  } else {
    console.log('Это не user1');
  }
});

<form action="" method="GET" id="formSelectUser">
  <select size="4" class="select-user" id="selectUser">
    <option disabled>Пользователи</option>
    <option value="user1">Пользователь 1</option>
    <option value="user2">Пользователь 2</option>
    <option value="user3">Пользователь 3</option>
    <option value="user4">Пользователь 4</option>
    <option value="user5">Пользователь 5</option>
  </select>
  <input type="submit" class="btn" id="btn">
 </form>

Answer 3

Немного переделал ваш код, теперь он работает правильно) Проблема в том что вы не правильно их сравнивали нужно вместо оператора '=' поставить "===", что означает строгое сравнение.

$(document).ready(function() {
    $('input[type=submit]').on('click', function() {
        selectUser = $("#selectUser option:selected").val();
        if (selectUser === 'user1') {
            alert('User 1');
        } else {
            alert ('Other user');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="GET">
  <select size="4" class="select-user" id="selectUser">
    <option disabled>Пользователи</option>
    <option value="user1">Пользователь 1</option>
    <option value="user2">Пользователь 2</option>
    <option value="user3">Пользователь 3</option>
    <option value="user4">Пользователь 4</option>
    <option value="user5">Пользователь 5</option>
  </select>
  <input type="submit" class="btn" id="btn">
 </form>

БЛОГ НА HUSL

Работа с select и option

Ответы (3 шт):