根据所选下拉菜单的值动态更改标签时发生TypeError错误[Rails 4.2]

Question

我想基于选定的下拉列表[Ruby on Rails 4.2]更改标签。

我有一个名为match的表，它的列名称为team1和team2。

这是我的观点，在这里我尝试根据所选值动态修改的标签：

            <%=select_tag "match", options_from_collection_for_select(Match.all, :id, :name), {:onchange => "removeClass()" }%>



        <div class="d-none"  id="betting">


            <div class="row">

                <div class="col-md-4">
                    <input type="radio" id="team1" name="bet" value="team1" />
                    <label for="team1">
                        <%= content_tag('span', "", id: 'labelTeam1') %>
                    </label>
                </div>

                <div class="col-md-4">
                    <input type="radio" id="draw" name="bet" value="draw" />
                    <label for="draw" class="draw">Nul</label>
                </div>

                <div class="col-md-4">
                    <input type="radio" id="team2" name="bet" value="team2" />
                    <label for="team2" class="labelTeam2"><%= content_tag('span', "", id: 'labelTeam2') %></label>
                </div>
            </div>
        </div>


        <script>
            var matches = <%= raw(@matches.map(&:id).to_json) %>;
            var match_details = <%= raw(@matches.map {|match| [match.team1, match.team2] }.to_json) %>;
        </script>

要动态修改我的无线电标签，请使用以下javascript函数：

function removeClass() {
 if ($("#match").val() != '') {
    $( "#betting" ).removeClass( "d-none" );
    var value = +$(this).val();
    console.log("Value = ", value);
    var match_index = $.inArray(value, matches);
    var team1Val = match_details[match_index][0];
    var team2Val = match_details[match_index][1];
    $(".labelTeam1").text(team1Val);
    $(".labelTeam2").text(team2Val);
}
else {
    $( "#betting" ).addClass("d-none");
  }
}

但是，它不起作用，并且在浏览器中操作选择标记时出现此错误：

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at w.fn.init.val (jquery-3.3.1.min.js:2)