如何根据另一个输入框的输入值选择下拉列表

时间:2013-05-17 06:20:59

标签: javascript jquery ajax

我有很多谷歌,但我无法理解如何做到这一点。

代码如下:

<html>
    <head>
     <script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>  
    </head>


  <body>
    <script type="text/javascript">
    $(document).ready(function (){
        $('#emp_id').blur(function(){

            alert($(this).val());
            $('#emp_name').val($(this).val());
        });
        $('#emp_name').change(function(){

            $('#emp_id').val($(this).val());            
        } );

    });
    </script>

    <input type="text" id="emp_id" />
    <select id="emp_name" name="emp_name">
        <option value="00000" >Please Select </option>
        <option value="e0001" >James Smith</option>         
        <option value="e0002" >Roger Sm</option>
        <option value="e0003" >Elina Lobo</option>
    </select>

  </body>
 </html> 

并运行jsFiddle http://jsfiddle.net/kamleshahire/J3qLv/1/ 我有两个组成部分:

  1. 输入框:用户可以输入员工ID,一旦用户输入的员工代码根据员工代码更改了下拉列表。员工ID是下拉列表的一部分。

  2. 下拉列表:它将员工ID和值作为员工姓名。

  3. 如果预先填充的下拉列表中没有输入值,我想显示错误消息。

    提前致谢

2 个答案:

答案 0 :(得分:4)

以这种方式尝试:

    $('#emp_id').change(function(){
        if($('option[value='+$(this).val()+']').length){
            $('#emp_name').val($(this).val());
        }
        else{
            alert('Employee not found.');
        }
    });

我编辑了我的答案以满足您更新的要求。这是fiddle !!

答案 1 :(得分:0)

完整的解决方案

和JSFiddle是

<强> http://jsfiddle.net/kamleshahire/J3qLv/4/

<html>
    <head>
     <script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>  
    </head>


  <body>
    <script type="text/javascript">
    $(document).ready(function (){
        $('#emp_id').blur(function(){

            //alert($(this).val());
            var inputValue = $(this).val();

            $('#emp_name').each(function(){
                if(this.value == inputValue){

                    $('#emp_name').val($(this).val()); 
                    return false;
                }
                alert("Please iput valid value");
                $('#emp_name').val('-1');

            });

        });
        $('#emp_name').change(function(){

            $('#emp_id').val($(this).val());            
        } );

    });
    </script>

    <input type="text" id="emp_id" />
    <select id="emp_name" name="emp_name">
        <option value="-1" >Please Select </option>
        <option value="e0001" >James Smith</option>         
        <option value="e0002" >Roger Sm</option>
        <option value="e0003" >Elina Lobo</option>
    </select>

  </body>
 </html>