时间戳

首页 > 解决方案 > 没有通过箭头键在我的表格中聚焦此选择框，但所有其他字段都成功聚焦

javascript - 没有通过箭头键在我的表格中聚焦此选择框，但所有其他字段都成功聚焦

问题描述

我是 jQuery 的初学者，我有一个场景，我的表格中有选择框和文本字段；我实现了箭头键（向下表示下一个，向上表示上一个）通过为每个字段提供一个类来将焦点转移到该字段。

问题是通过 Ajax显示其选项的选择框没有聚焦。

用于箭头键移位的 jQuery：

var classNames = $(this).attr("class").split(" ");
// console.log("aftersplit:" + classNames);
for ( var contarray = 0, l = classNames.length; contarray < l; contarray++ ) 
{
    var current_iterating_class=classNames[contarray];
    if(current_iterating_class.indexOf("table2_index_")!= -1)
    {
        var current_class=current_iterating_class;
        // console.log("currently:=="+current_class);
    }
    // console.log("current_iterating_class===" +current_iterating_class );
}
console.log("current_class=="+current_class);
var pos= current_class.substr(current_class.indexOf("_") +7);
// console.log("position"+pos);
pos=Number(pos);
if(e.keyCode == 40){                //downarrow(forw)
    pos += 1;
    // console.log("pos+1=" + pos);                                                         
    $(".table2_index_"+pos).focus();    
    if(this.tagName == "SELECT" || this.tagName == "select") {
    }
    // console.log("down"+pos);
}
if(e.keyCode==38){                   
    pos -= 1;
    $(".table2_index_"+pos).focus();
   // console.log("upp"+pos);
}

表格 HTML：

<td>
  <select class="typecode inputbox input_table2 table2_index_1" name="typecode[]">
    <option value="S">S</option>
    <option value="R">R</option>
    <option value="O">O</option>
  </select>
</td>
<td><input type="text" class="code inputbox input_table2 table2_index_2" name="code[]" style="width: 100%">
  <input type="hidden" class="product_id" name="product_id[]" style="width: 100%">
</td>
<td id="item" class="item" align="center">
  <select class="select_item inputbox input_table2 table2_index_3" name="item[]">
    <option selected="selected"></option>
  </select>
  <input type="hidden" name="product_id_val" value="0">
</td>

<td><input type="text" class="type inputbox input_table2 table2_index_4" name="type[]" style="width: 100%"></td>

用于选择选项的 Ajax：

$(".select_item").select2({
    ajax: {
        url: "' . $selectitem . '",
        dataType: "json",
    }
}).on("change", function () { 
    var this_=$(this);          
    this_.closest("tr.rowacc").find(".product_id").val(this.value);
    getitemvalues( this.value,this_);
});

其他静态选择框正在工作，我找不到问题。

标签： javascriptjqueryyii2

解决方案

$('#id').select2('open');

//Init Select2
$('.b_select').select2();

// Make Select2 respect tab focus
function dropdownFocus(){
    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 40 && jQuery('.select2-search__field:focus').length) {
            jQuery('.b_select').select2('open');
        }
    });
}

dropdownFocus();//init function

推荐阅读