如何根据选择框的值更改文本框的值？

Question

我在网上和这个网站上搜索过一个简单且适应性强的解决方案，但遗憾的是，没有任何乐趣。

所需的过程：

1. 用户从列表中选择。 例如名称。
2. 只读文本框的值会根据所选<选项>自动填充。 例如与姓名对应的电话号码。
3. 最后，框和文本框都必须有自己的值。 分别是姓名和电话号码。

基本标记：

当此更改时，更新文本框的值：

<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 -数据属性/

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

Answer 1

在您的选项中添加“数据电话号码”值：

<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

你可以试试这个。

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

如果您希望它显示电话号码，只需将 HTML 设置为将每个选项的值设置为电话号码即可。例如。

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

Answer 3

我会做类似的事情：

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

取决于你想如何处理你的变量

Answer 4

您也可以在不将选择框和电话号码紧密联系在一起的情况下执行此操作。使用 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”、“Frank”和“Jim”。每个对象都有一个phone 属性，您可以使用点符号访问该属性，就像我所做的那样（即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" />