为什么我无法获得选择选项 html 的值？答案

【问题标题】：Why I can't get the value of a select option html?为什么我无法获得选择选项 html 的值？
【发布时间】：2018-09-25 03:53:36
【问题描述】：

所以我列出了一些类别，每个类别都有一个适当的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){
        }
    });
}

【问题讨论】：

你能发布所有相关代码吗？目前没有与toLowerCase相关的东西
请创建小提琴，以便其他人可以更快地帮助您。
在我将 onchnage 更改为 id 并将此 sn-p 后，绝对没有任何反应$('#sortByCategory').on('change', function() { var value = $(this).val (); console.log(value); });

标签： javascript jquery html ajax laravel

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：