为什么我无法获取选择选项 html 的值？

Question

所以我列出了许多类别，每个类别都有一个适当的id值，这个想法是在类别被更改以向服务器发送ajax请求之后，但在此之前我必须获取我选择的类别的id，问题是每次我尝试获取值后我都会收到此错误消息

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

如果您使用事件处理程序(如"onchange"(，请将其作为参数发送，如下所示：

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>

Answer 2

当您想从选择中获取值时，可以从HTML中读取其值。在您的情况下，它会像这样：https://jsfiddle.net/jm4kLe65/11/

您需要将 select 对象 (this( 传递给您的sortByCategory()函数，然后从那里您可以访问它的许多属性。在您的情况下，您只对其选定的值感兴趣，您可以通过select.value

访问该值