0

I have to create one input text box and select box. In select, option will contains some userId values are user names. User can use both text box and select box to input the data. if he/she select any username then userId should be updated in the text box. And vice-versa if user enters userId in textbox userId should be updated in text box.

First part of functionality is working fine.

I am not getting any solution in jQuery, how to make the particular option id selected.

Second Part

These are dynamically created by select and input-boxes. These will be increased. I need to do for each. How can I do the same functionality for the all using 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);
    });

I have created this JS Fiddle as well.

4

4 回答 4

1

你有几件事错了

  1. option应该有一个属性valuenotid
  2. 获取 a 的选定值时select，使用 jQuery 使用$('#demoSelect').val()
  3. 设置 a 的选定值时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/

于 2013-04-24T10:16:03.597 回答
1

由于您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;
    });

演示

于 2013-04-24T10:17:08.433 回答
0

我猜它不起作用，因为#demoSelect当#demoInput' 值更改时，您实际上并没有更新 ' 值。

$('#demoInput').change(function(){
   var value = $(this).val();
   $('#demoSelect option:selected').removeAttr('selected');
   $('#demoSelect option#' + value).attr('selected', 'selected');
});
于 2013-04-24T10:15:58.473 回答
0

我是这样做的：

 $('#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/

于 2013-04-24T10:19:54.237 回答