Я искал в Интернете и на этом веб-сайте простое и адаптируемое решение, но, увы, безрезультатно.

Требуемый процесс:

1. Пользователь выбирает <option> из <select> списка. например, имя.
2. Значение текстового поля, доступного только для чтения, автоматически заполняется на основе выбранного <option> . например, номер телефона, соответствующий имени.
3. Наконец, <select> поле и текстовое поле должны иметь свои собственные значения. т.е. имя и номер телефона соответственно.

Базовая разметка:

Когда это изменится, обновите значение моего текстового поля:

 <select id="name" name="name">
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
  

Значение, зависящее от значения вышеуказанного поля:

 <input type="text" id="phonenumber" name="phonenumber" value="">
  

Мой вопрос:

Как мне достичь этого, используя jQuery или обычный Javascript? Пожалуйста, ответьте на это с точки зрения новичка на стороне клиента.

Решение (благодаря corroded):

Я добавил следующее в заголовок моего документа:

  <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">  
 $(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#phonenumber").val($(this).find("option:selected").attr("data-phonenumber"));
    })
 });                                     
 </script>
  

…и следующее в теле моего документа:

 <select id="name" name="name">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111">Elvis</option>
<option value="Frank" data-phonenumber="22222">Frank</option>
<option value="Jim" data-phonenumber="33333">Jim</option>
</select>

<input type="text" id="phonenumber" name="phonenumber" value="" readonly="readonly">
  

Для получения дополнительной информации об использовании data-somename в качестве атрибута, как предложено corroded, обратитесь к следующим ссылкам:

http://ejohn.org/blog/html-5-data-attributes/

http://blogs.sitepoint.com/rel-not-a-custom-attribute/

добавьте значение «данные-номер телефона» в свои параметры:

 <option value="Elvis" data-phone-number="77777">Elvis</option>
  

в вашем jquery:

 $("#name").live("change", function() {
  $("#phonnumber").val($(this).find("option:selected").attr("data-phone-number"));
})
  

рефакторинг по мере необходимости 🙂

Вы можете попробовать это.

 $('#name').change(function(){
    $('#phonenumber').val($(this).val());
});
  

Если вы хотите, чтобы в нем отображался номер телефона, просто настройте свой HTML-код так, чтобы значением каждого параметра был номер телефона. Например.

 <option value="5555555555">Frank</option>
  

Я бы сделал что-то вроде:

 <select id="name" name="name">
  <option value="0123456789">Elvis</option>
  [...]
</select>
  

и затем

 $('#name').change(function(){
  var thisphone = $(this).val();
  $('#phonenumber').val(thisphone);
});
  

или

 $('#name').change(function(){
  $('#phonenumber').val($(this).val());
});
  

в зависимости от того, как вы хотите работать со своими переменными

Вы также можете сделать это, не связывая поле выбора и телефонные номера так тесно друг с другом. Используйте нотацию JSON для настройки объектов, содержащих всю информацию о вашем персонаже, например:

 <script type="text/javascript">
    var people = {
        Elvis:  {
            phone: "555-5555"
            },
        Frank: {
            phone: "123-4567"
            },
        Jim: {
            phone: "987-6543"
            }
        };

    window.onload = function() {
        var list = document.getElementById("name");
        list.onchange = function() {
            document.getElementById("phone").value = people[this.value].phone;
        }   
    }
</script>
  

По сути, мы просто создаем три объекта: «Элвис», «Фрэнк» и «Джим» внутри более крупного объекта под названием «люди». У каждого объекта есть свойство phone, к которому вы можете получить доступ с помощью точечной записи, как это сделал я (т. Е. people[«Элвис»].phone), или обозначения массива (т. Е. people.Элвис [«телефон»]]).

Чтобы упростить задачу, я использую ключевое слово «this», поскольку при вызове из обработчика событий «onchange» оно ссылается на объект, который вызвал событие — поле выбора. Итак, «this.value» относится к значению в поле выбора.

Теперь ваш выбор остается довольно простым:

 <select id="name" name="name">
    <option value="Elvis">Elvis</option>
    <option value="Frank">Frank</option>
    <option value="Jim">Jim</option>
</select>

<br />
<input type="text" id="phone" />