параметр выбора jquery следует выбирать на основе опции id

Question

Мне нужно создать одно текстовое поле ввода и выбрать поле. В элементе выбора параметр будет содержать некоторые значения userId - это имена пользователей. Пользователь может использовать как текстовое поле, так и поле для ввода данных. если он/она выбирает любое имя пользователя, то userId следует обновить в текстовом поле. И наоборот, если пользователь вводит userId в текстовое поле userId, необходимо обновить его в текстовом поле.

Первая часть функциональности работает нормально.

Я не получаю никакого решения в jQuery, как выбрать конкретный вариант.

Вторая часть

Они динамически создаются с помощью отборных и ввода-боксов. Они будут увеличены. Мне нужно сделать для каждого. Как я могу сделать одну и ту же функциональность для всех, используя 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); 
    }); 

Я создалJS Fiddle также.

Answer 1

Я думаю, что это не работает, потому что вы фактически не обновляете значение #demoSelect при изменении значения #demoInput.

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

Answer 2

У вас было несколько вещей неправильно

1. option должен иметь атрибут value не id
2. При получении выбранного значения в select, используя JQuery использовать $('#demoSelect').val()
3. При установке выбранного значение 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 3

Как ваш 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 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/