PHP MYSQL多个下拉菜单更改时选择值

Question

I have fetched product sizes and quantity from a table and showed them in dropdown lists.Depending on products the drop downs may vary from 5 to 6.I want to get the value of size id from the drop down when a user selects it from the drop down and put it as value in the input type number.

<select name='size' id='size' class='form-control'>

      <option value="1">Small</option>

  </select>

<input type='number' name='quantity' min='1' value='1' class='form-control' />
<select name='size' id='size' class='form-control'>

      <option value="2">Large</option>

  </select>

<input type='number' name='quantity' min='1' value='1' class='form-control' />

<select name='size' id='size' class='form-control'>

      <option value="3">XLarge</option>

  </select>

<input type='number' name='quantity' min='1' value='1' class='form-control' />

The jquery I am using is as follows,

<script type="text/javascript">
    $(document).ready(function() {
        $("#size").change(function() {
            var str = "";
            $("select option:selected").each(function() {
                str += $(this).val() + " ";
            });
        });
    });
</script>

I am getting values form first dropdown but can not get from other dropdowns. Kindly help

Answer 1

As discussion i did a fiddle to give the solution Fiddle Link

Updated JS:

$(document).ready(function() {
    $(".size").on("change", function() {
        $(this).closest("div").find("input").val($(this).val());
    });
});

If you want to get the $row['size'] when select any option then you have to change your PHP code also.

Updated PHP

<div>
<select name='size' class='form-control size'>
    <?php foreach ($rows as $row) {?>
      <option value="<?php echo $row['size']?>" <?php if ($row['quantity'] == 0) echo "disabled=disabled"?>>
        <?php echo $row['size']?>
      </option>
        <?php }?>
</select>
<input type='number' name='quantity' min='1' value='1' class='form-control' />
</div>
<div>
<select name='size' class='form-control size'>
    <?php foreach ($rows as $row) {?>
      <option value="<?php echo $row['size']?>" <?php if ($row['quantity'] == 0) echo "disabled=disabled"?>>
        <?php echo $row['size']?>
      </option>
        <?php }?>
</select>
<input type='number' name='quantity' min='1' value='1' class='form-control' />
</div>

Note: $(this).val() get the selected value from the drop down and put the value into the input field by $(input[name=quantity]).val() I put the $row['size'] to the option value

Let me know is it helpful to you or not.

Answer 2

try this:

<td>
    <select name='size' id='size' class='form-control'>
          <?php foreach ($rows as $row) {?>
            <option value="<?php echo $row['id']?>" <?php if ($row['quantity'] == 0) echo "disabled=disabled"?> >
                <?php echo $row['size']?>
            </option>
          <?php }?>
        </select>
</td>
<td>
    <input type='number' name='quantity' min='1' value='1' class='form-control' />
</td>

Answer 3

您的下拉ID应该不同，因为您知道ID对于文档中的一个元素是唯一的。