期望的过程：

Question

我在网上和这个网站都搜索过一个简单且适应性强的解决方案但是唉，没有快乐。

期望的过程：

用户从<option>列表中选择<select>。 e.g。一个名字。
只读文本框的值会根据所选的<option>自动填充。 e.g。与姓名对应的电话号码。
最后，<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作为属性的更多信息，如corroded所示，请参阅以下链接：

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

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

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

我会做类似的事情：

<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 3

你可以试试这个。

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

如果您希望显示电话号码，只需设置HTML以使每个选项的值都为电话号码。例如。

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

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>

基本上，我们只是在一个叫做“人”的更大物体中创造了三个物体，“猫王”，“弗兰克”和“吉姆”。每个对象都有一个电话属性，您可以使用点符号访问，就像我已经完成的那样（即人[[Elvis“]。电话）或数组符号（即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" />

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

期望的过程：

基本标记：

我的问题：

解决方案（由于腐蚀）：

4 个答案: