Question

以下是我的代码，一切正常。我输入第一个文本框并获取第二个文本框的ajax响应，而选择选项显示与第二个文本框相同的值，但选择选项仅在我将光标放入第二个文本框后按箭头键时更改，这里我想更改选择选项放光标或按任意键。

代码：

<script>
$(document).ready(function() {
    $('#searchip').change(function(){
        $.ajax({

            type: "GET",
            url: "reverseip.php",
            data: 'result=' + $('#searchip').val(),

            success: function(output){
                $('#resultip').val(output);

            }

        }); // Ajax Call



    }); //event handler


 }); //document.ready
</script>


<script type="text/javascript">
$(function() {
$('#resultip').on('keyup', function() {
    selectByText($.trim($(this).val()));
});
});

function selectByText(txt) {
$('#MySelect option')
    .filter(function() { 
        return $.trim($(this).text()) == txt; 
    })
    .attr('selected', true);
}
</script>


<input type="text" id="searchip">
<input type="text" id="resultip">




<select name="sel" id="MySelect" >
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>

如何在不按第二个文本框中的箭头键的情况下更改选择框选项？

Answer 1

设置文本框的值时调用相同的函数：

success: function(output){
  $('#resultip').val(output);
  selectByText($.trim($('#resultip').val()));
}

Answer 2

在ajax调用成功函数中进行如下更改：

success: function(output){
    $('#resultip').val(output);
    $('#MySelect option[value='+output+']').attr('selected','selected');
}

从文本框中选择Ajax响应选项

2 个答案: