javascript - 为什么我无法获得选择选项 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){
        }
    });
}

标签： javascriptjqueryhtmlajaxlaravel

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>