Почему я не могу получить значение параметра выбора HTML?

Question

Итак, я перечислил несколько категорий, каждая из этих категорий имеет значение соответствующего идентификатора, идея состоит в том, чтобы после изменения категории отправлять запрос ajax на сервер, но перед этим мне нужно получить идентификаторВ выбранной категории проблема заключается в том, что после каждого попытки получить значение я получаю сообщение об ошибке

app.js:1 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at C.fn.init.val (app.js:1)
at sortByCategory (news:174)
at HTMLSelectElement.onchange (news:215)

Проблема в том, что он возвращает мне весь объект окна, и я не знаю, какчтобы получить только значение выбранного параметра.

html -

<select onchange="sortByCategory()" name="category">
                            @foreach($categories as $category)
                                <option value="{!! $category->id !!}">
                                    {{ $category->title }}
                                </option>
                            @endforeach
                        </select>

javascript -

 function sortByCategory(){
    var value = $(this).val();
    console.log(value);
    $.ajax({
        type:'POST',
        url:'/home/sortByCategory',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data : {
            category : 'bar'
        },
        success:function(data){
        }
    });
}

Answer 1

когда вы хотите получить значение из выбора, вы можете прочитать его значение из HTML.В вашем случае это будет что-то вроде: https://jsfiddle.net/jm4kLe65/11/

Вам нужно передать объект select (this) в вашу функцию sortByCategory(), и оттуда вы сможете получить доступ ко многим его свойствам.В вашем случае вас интересует только выбранное значение, к которому вы можете получить доступ select.value

Answer 2

Если вы используете обработчик событий (например, «onchange»), отправьте this в качестве аргумента, например:

function sortByCategory(el){
		alert($(el).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="sortByCategory(this)" name="category">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

Лучшим решением было бы отделить код JavaScript от кода HTML следующим образом:

$("#category").on("change", function() {
	alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="category" id="category">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>