Question

我正在尝试制作一个片段，要求用户在输入字段中输入一些值。这些值是预定义的。我可以使用下拉菜单而不是它。但使用下拉列表会增加工作量。场景是这样的，每当用户想要在输入字段中写入一些文本时，将在每个输入字段中显示一些选项，用户将选择一个值，并且将在该字段中填充所选值。我已经完成了它，但是当我选择一个值时，它会在所有（先前/下一个）输入字段中更新相同的值。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function( $ ) {

    $(".font-select option").filter(function() {

        var current_field = $(this);

        return $(current_field).val() == $(".product_addon_option_label").val();

    }).attr('selected', true);

    $(".font-select").live("change", function() {

        $(".product_addon_option_label").val($(current_field).find("option:selected").attr("value"));
    });

});
</script>
</head>
<body>
<table width="300">
  <tbody class="ui-sortable" style="">
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Arial" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Thohm" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 1

稍微更新了您的代码。这是你在找什么？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
var current_field = '';
    $(".font-select option").filter(function() {

        current_field = $(this);

        return $(current_field).val() == $(".product_addon_option_label").val();

    }).attr('selected', true);

    $(".font-select").live("change", function() {
    $(this).prev(".product_addon_option_label").val($(this).val());
    });

});
</script>
</head>
<body>
<table width="300">
  <tbody class="ui-sortable" style="">
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Arial" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Thohm" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 2

＆＃13;

jQuery(document).ready( function( $ ) {    
    $(".font-select").on("change", function() {
      $(this).parent().find('.product_addon_option_label').val($(this).val());
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300">
  <tbody class="ui-sortable" style="">
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Arial" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Thohm" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

单击输入字段时jQuery显示选项不起作用

2 个答案: