Question

这里我试图根据用户从下拉列表中选择值来更改文本框的值，但是下拉列表中选择的值未在文本框中更新..请帮帮我。

这是我的代码。

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

<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">India</option> 
<option value="Frank">Us</option> 
<option value="Jim">China</option> 
</select>

Answer 1

要检索所选值：

$("#name").change(function() {
      $("#firstname").val($(this).val());
});

要检索所选文字：

$("#name").change(function() {
      $("#firstname").val($(this).find('option:selected').text());
});

Answer 2

这个适用于我的..

<html>
<head>
<script type="text/javascript" src="resources/javascripts/jquery-1.8.3.js"></script>
<script type="text/javascript">  
     $(document).ready(function() {                                       
        $("#name").live("change", function() {
          $("#firstname").val($(this).find("option:selected").attr("value"));
        });
     });                                     
</script>

<script type="text/javascript">
</script>
</head>
<body>
<div>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">India</option> 
<option value="Frank">Us</option> 
<option value="Jim">China</option> 
</select><br />
<input type="text" id="firstname" name="firstname" value="" readonly="readonly">
</div>
</body>
</html>

Answer 3

.val()用于获取当前元素（dom）值。 See more

.attr()用于获取element（dom）属性的值。 See More

$("#name").on("change", function() {
      $("#firstname").attr('value',$(this).val());
});

将.live更改为.on因为.live已弃用。

Answer 4

试试这个：

$("#firstname").val($('select[name="name"]').val());

Answer 5

取代实时使用更改功能：

 <script type="text/javascript">  
    $(document).ready(function() {
       $("#button").click(function() {
           $("#firstname").val($("#name").val());
       });
    });                                     
</script>

<input type="text" name="firstname" id="firstname"/>

<select id="name" name="name"> 
   <option value="">Please select...</option> 
   <option value="Elvis">India</option> 
   <option value="Frank">Us</option> 
   <option value="Jim">China</option> 
</select>

<input type="button" name="button" id="button" value="button" />

这将在文本框中设置选定的值。经过测试的代码。

Answer 6

您错过了一个文本框，不应该使用live()。（在较新版本的jquery中显然缺少它）

<script type="text/javascript" src="resources/javascripts/jquery-1.8.3.js"></script>
<script type="text/javascript">  
     $(document).ready(function() {                                       
        $("#name").on("change", function() {
          $("#firstname").val($(this).find("option:selected").attr("value"));
        })
     });                                     
</script>
<input id=firstname type=text>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">India</option> 
<option value="Frank">Us</option> 
<option value="Jim">China</option> 
</select>

Answer 7

除了在准备好的功能中缺少分号外，你的代码没有问题

  $(document).ready(function() {                                       
        $("#name").live("change", function() {
          $("#firstname").val($(this).find("option:selected").attr("value"));
        });
     });

这有效！

Answer 8

<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="India">India</option> 
<option value="Us">Us</option> 
<option value="China">China</option>

同时输入相同的值

我认为这是你想要的东西

请点击这里

http://jsfiddle.net/francisstalin/wnyKq/

使用jquery从下拉列表中检索值到文本框

8 个答案: