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”），则将 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>

Answer 2

当您要从选择中获取值时，可以从html中读取其值。在您的情况下，它类似于：https://jsfiddle.net/jm4kLe65/11/

您需要将选择对象（this）传递给sortByCategory()函数，从那里您可以访问其许多属性。就您而言，您只对可以通过select.value

访问的所选值感兴趣

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

2 个答案: