CODEWITHSUNDEEP
jqueryhtml
Zubair Mushtaq
Zubair Mushtaq

Reputation: 323

jQuery show options when click on an input field is not working

I am trying to make a snippet that asks user to input some value in input field. These values are predefined. I can use dropdown instead of it. But using dropdown will increase the work load. The scenario is this whenever user want to write some text in input field, some options will be shown with each input field, user will select a value and the selected value will be populated in that field. I have done it but as I select a value it updates tha same value in all (previously/next) input fields.

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

Upvotes: 1

Views: 397

Answers (2)

Milan Chheda
Milan Chheda

Reputation: 8249

Have updated your code a bit. Is this what you are looking for?

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

Upvotes: 1

Jurij Jazdanov
Jurij Jazdanov

Reputation: 1258

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

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

Upvotes: 1

Related Questions