Как изменить значение текстового поля на основе значения поля выбора?

Question

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

Желаемый процесс:

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 ?Пожалуйста, ответьте на это с точки зрения начинающего клиента.

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

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

 <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 в качестве атрибута, как это предложено при коррозии, см. Следующие ссылки:

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

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

Answer 1

добавьте значение "data-phone-number" в ваши опции:

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

в вашем jquery:

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

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

Answer 2

Вы также можете сделать это, не связывая поле выбора и телефонные номера так тесно друг с другом. Используйте нотацию 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>

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

Чтобы упростить задачу, я использую ключевое слово 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" />

Answer 3

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

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

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

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

Answer 4

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

<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());
});

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