Question

我必须创建一个输入文本框并选择框。在select中，选项将包含一些userId值是用户名。用户可以使用文本框和选择框来输入数据。如果他/她选择任何用户名，则应在文本框中更新userId。反之亦然，如果用户在文本框中输入userId，则应在文本框中更新userId。

功能的第一部分工作正常。

我没有在jQuery中获得任何解决方案，如何选择特定的选项ID。

第二部分

这些是由select和input框动态创建的。这些将会增加。我需要为每个人做。如何使用jQuery为所有人执行相同的功能。

    <input type="text" id="demoInput" /> 

    <select id="demoSelect" >
    <option id="0">User Name A</option>
    <option id="1">User Name B</option>
    <option id="3">User Name C</option>
    <option id="4">User Name D</option>
    <option id="5">User Name E</option>
    <option id="6">User Name F</option>  
    </select>

    $('#demoSelect').change(function(){
        //alert('event fired');
        var id = $(this).children(":selected").attr("id");
        //alert('id is ' +id);     
        $('#demoInput').val(id);
    });

 $('#demoInput').change(function(){
        alert('event fired');
        $('#demoSelect').children(":selected").removeAttr("selected");


        alert('id is ' +id);     
        $('#demoInput').val(id);
    });

我也创建了this JS Fiddle。

Answer 1

你有一些错误

option应该有一个属性value而不是id
获取select的选定值时，使用jQuery使用$('#demoSelect').val()
设置select的选定值时，使用jQuery使用$('#demoSelect').val(newValue)

所以你的选择框变为：

<select id="demoSelect" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>  
</select>

更改文本框时触发的代码变为：

$('#demoInput').change(function(){
    alert('event fired');
    $('#demoSelect').children(":selected").removeAttr("selected");

    var id= $(this).val();                       
    alert('id is ' +id);     
    $('#demoSelect').val(id);
});

你的jsFiddle的工作分支：http://jsfiddle.net/CGQ7N/

Answer 2

由于您的id未初始化且您的绑定错误。已将change事件更新为keyup事件，因为每次都需要点击外部以触发事件：）

您可以使用$('#demoInput').get(0)方法作为索引从0开始我们需要将-1减去它吗？

特别指定索引后，.get(index)将检索单个元素：

   $('#demoInput').keyup(function(){
         alert('event fired');
        $('#demoSelect').children(":selected").removeAttr("selected");

         var id= $("#demoInput").val()
        alert('id is ' +id);     
        $('#demoSelect').get(0).selectedIndex = id-1;
    });

<强> Demo

Answer 3

我想它不起作用，因为当#demoSelect的值发生变化时，你实际上并没有更新#demoInput的值。

$('#demoInput').change(function(){
   var value = $(this).val();
   $('#demoSelect option:selected').removeAttr('selected');
   $('#demoSelect option#' + value).attr('selected', 'selected');
});

Answer 4

我是这样做的：

 $('#demoInput').change(function(){
        var $val = $('#demoInput').val(); //get the value of the input
        $('#demoSelect').children(":selected").removeAttr("selected"); //unselect any selected option
        $('#demoSelect').find('#'+$val).attr('selected',true); //find the option with id="<input value>" and select it
    });

JSFiddle：http://jsfiddle.net/7GUaq/22/

应根据选项id选择jquery select选项

4 个答案: