Question

我在html中有一个选择列表，我想在文本框中获取选择值。为此，我做了以下代码：

 <script type="text/javascript">
    $(document).ready(function(){
        $("#myDropdown").change(function () {
        var selectedValue = $(this).val();
        $("#txtBox").val($(this).find("option:selected").attr("value"))
    });
   });
    </script>

<table id="tab1">
    <tr>
        <td>Select Affiliate Source:</td>
        <td>
            <select id="myDropdown">
                <option value="vcom">Vcommission</option>
                <option value="pym">Payoom</option>
                <option value="snpdl">Snapdeal</option>
                <option value="flpkrt">Flipkart</option>
            </select>
            <div><input id="txtBox" type="text"></div>
        </td>
    </tr>
</table>

但是在选择文本框中选择值时，没有显示任何值。

Answer 1

您已经拥有selectedValue中的值，不需要find：

$("#myDropdown").change(function () {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
});

另外，您的问题中显示的代码将尝试在{element>存在之前访问select元素，并且不会为其附加change处理程序。我不知道你的代码是如何安排的，但如果是这样，那也是一个问题。脚本代码只能访问运行之前定义的元素。您需要移动script标记以下 select标记（通常恰好在结束</body>标记之前），或使用jQuery的{{3}回调（但只有当你不控制脚本标记的去向时）。

这是一个完整的例子，按顺序：

<table id="tab1"> <tr> <td>Select Affiliate Source:</td> <td> <select id="myDropdown"> <option value="vcom">Vcommission</option> <option value="pym">Payoom</option> <option value="snpdl">Snapdeal</option> <option value="flpkrt">Flipkart</option> </select> <div><input id="txtBox" type="text"></div> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $("#myDropdown").change(function () { var selectedValue = $(this).val(); $("#txtBox").val(selectedValue); }); </script>

Answer 2

您可以在$(document).ready()
您已在selectedValue中拥有所选值，无需使用find()

＆＃13;

$(document).ready(function() {
  $("#myDropdown").change(function() {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
</script>

<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
      <select id="myDropdown">
        <option value="vcom">Vcommission</option>
        <option value="pym">Payoom</option>
        <option value="snpdl">Snapdeal</option>
        <option value="flpkrt">Flipkart</option>
      </select>
      <div>
        <input id="txtBox" type="text">
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

使用$.ready()，因为在jquery代码之后加载了DOM，因此未应用元素事件，

$(function(){
    $("#myDropdown").change(function () {
        $("#txtBox").val(this.value); // sometimes core javascript functionality more easy to use
    });
});

Answer 4

如果您使用以下代码，则应提供所需的结果。

要在jQuery中检索select元素的值，您只需要调用元素的val()函数，如下所示。

$(document).ready(function(){
  $("#myDropdown").change(function () {
     var selectedValue = $(this).val();
      $("#txtBox").val(selectedValue);
  });
})

来源：http://api.jquery.com/val/

Answer 5

脚本应在整页加载后执行，或者您可以在页面末尾移动脚本。试试这个，

$(document).ready(function(){
  $("#myDropdown").change(function () {
     var selectedValue = $(this).val();
      $("#txtBox").val(selectedValue);
  });
})

如何在jquery中选择更改时获取选项值的值

5 个答案: