How do I use Jquery to read from selected option with array?

Question

I have php code bellow, I want to write a script to read option value from drop-down list and put each value in the input box when I change the selection. Please, help.

<html>
  <head> 
    <!-- Load jQuery from Google's CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
    //I want to write a script that will read the selected value and put in the input box
    </script>
  </head>
  <body>
  <?php
    for ($i=0;$i<7;$i++)
    {
    ?>
    <select id='select$i'>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>
    </select>
      <input type="text" name="name" id="inputoption$i"  />      
    <?php }?>
    <br />


  </body>
</html>

note your `id='select$i'` and `id="inputoption$i"` as it will be treated a literal `$i`, not a php var, as it is not inside php tag ` — Sean, May 13 '15 at 04:39
possible duplicate of [Get selected value of a dropdown's item using jQuery](http://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery) — David R., May 13 '15 at 04:41

score 3 · Accepted Answer · answered May 13 '15 at 04:42

Try this:

    <html>
<head>
  <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="category-panel">
  <?php
  for($i = 0; $i < 7; $i++)
  {
    ?>
    <select id='select<?php echo $i; ?>'>
      <option value="1">Option1</option>
      <option value="2">Option2</option>
      <option value="3">Option3</option>
    </select>
    <input type="text" name="name" id="inputoption<?php echo $i; ?>"/>
  <?php } ?>
  <br/>
</div>
<script>
  $("select").on("change", function()
  {

    $(this).next("input").val($(this).val());
  });
</script>
</body>
</html>

score 2 · Answer 2 · answered May 13 '15 at 04:42

Better change the id into class :

$(function() {
  $(document).on('change', '.selectMe', function() {
    $(this).next().val($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='selectMe'>
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
<select class='selectMe'>
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />

Sougata Bose · Answer 3 · 2015-05-13T04:56:42.377

1

Generate them as -

<?php
for ($i=0;$i<7;$i++)
{
?>
<select class="selectoption">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
</select>
  <input type="text" name="name" class="inputoption"  />      
<?php }?>

With js -

$('.selectoption').on('change', function() {
    $(this).next('.inputoption').val($(this).val());
});

DEMO

edited May 13 '15 at 04:56

answered May 13 '15 at 04:42

Sougata Bose

31,517
8
49
87

score 1 · Answer 4 · answered May 13 '15 at 04:47

1

$("select[id^=select]").change(function(event){
    $(event.target).next().val($(event.target).val());
});

Code running here:

https://jsfiddle.net/noxg9pnz/

answered May 13 '15 at 04:47

Cryptovirus

271
2
6

Guruprasad J Rao · Answer 5 · 2015-05-13T04:54:08.740

0

You can try below script:

DEMO

$('.selc').on('change',function()
{
     $(this).siblings('input[type=text]').val($(this).val());
});

edited May 13 '15 at 04:54

answered May 13 '15 at 04:45

Guruprasad J Rao

29,410
14
101
200

1

your code would only put the value in 1 textbox, not the sibling textbox. – Sean May 13 '15 at 04:51

score 0 · Answer 6 · answered May 14 '15 at 00:28

I used Cryptovirus solution, I do as bellow and it works very well.

   <html>
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">      
   </script>

   </head>
   <body>
   <?php
   for ($i=0;$i<7;$i++)
   {
   echo("<script>
   $('select[id^=select]').change(function(event){
    $(event.target).next().val($(event.target).val());
   });
   </script>");
   echo("<select id='select$i'>
       <option value='1'>Option1</option>
       <option value='2'>Option2</option>
       <option value='3'>Option3</option>
   </select>
   <input type='text' name='name' id='inputoption$i'  /> </br>");
   }?>

   </body>
   </html>

How do I use Jquery to read from selected option with array?

6 Answers6