Getting the text from dropdown list and Insert it into input text using JQuery?

Question

How can i get the text from the dropdown list and insert it into input text using jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-2-label" type="text" />
<script>
    var label1 = document.getElementById('id_lines-0-item');
    var strlabel1 = label1.options[label1.selectedIndex].text;
    $('input:text').val(strlabel1);
</script>

I have tried this above code but it is not working and please forgive me if this a stupid question as i am learning jquery.

I have updated my question. I need to get the text from dropdown list with id="id_lines-0-item" and set the value to input text with id="id_lines-0-label" and respectively getting the value from dropdown list with id="id_lines-1-item" and set the value to input text with id="id_lines-1-label" and so on. Can this be done using DRY(Don't repeat yourself)?

Ankit Agarwal · Accepted Answer · 2018-04-16 07:42:11Z

You can associate a onchange() function in your select dropdown and use selection.options[selection.selectedIndex].text to get the selected option's text using JavaScript. Since, you have id for the text input it is always a better to use the id selector. In your case $('#id_lines-0-label'). Also, since you have separate text input for separate dropdown and you do not want to repeat the code for all three dropdowns, it is better to use the number value from the id of the dropdown. Use this value and concatenate to get the id of the input box.

function onchangeFn(selection) {
    var id= $(selection).attr('id');
    var num = id.match(/\d+/)[0];
    var strlabel1 = selection.options[selection.selectedIndex].text;
    $('#id_lines-'+num+'-label').val(strlabel1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange= 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />

@MikePinkman let me know if this is exactly what you expect to be or not

Novy · Accepted Answer · 2018-04-16 06:52:43Z

Update on select change



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form-group">
      <label class="sr-only control-label" for="id_lines-0-item">
        Item:
      </label>
      <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
      </select>
    </div>
    <input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
    <script>

$('select').on('change', function() {
  var strlabel1 =$('#id_lines-0-item option:selected').text();
  $('input:text').val(strlabel1);
})
    </script>

Abhijeet Kale · Accepted Answer · 2018-04-16 07:58:58Z

Your code works perfect !!

Just call some event on selection of dropdownlist like this

here is my edited answer. pass this(id) & index as a parameter and on the base of index set text to appropriate text field id.

Hope this will helpful for you!!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange="setTest(this,0)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />

  <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange="setTest(this,1)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-0-label" type="text" />

  <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange="setTest(this,2)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-0-label" type="text" />
<script>
  function setTest(el,index){
   var label1 = $(el).val();
   var strlabel1 = label1.options[label1.selectedIndex].text;
    if(index == 0)     
      $('#id_lines-0-label').val(strlabel1);
    else if(index == 1)
      $('#id_lines-1-label').val(strlabel1);
    else if(index == 2)
      $('#id_lines-2-label').val(strlabel1);

   }
</script>

Deepu Reghunath · Accepted Answer · 2018-04-16 08:11:17Z

Try to do with the on change event. Here I have use an on change event for select box. When you make changes to select box the function attached with event will trigger. And also if you want the result on page load , call the same function function at the time of page load like I did using $( document ).ready(function() {});

$('select').on('change', function() {
   updateValue($(this));
});

function updateValue(ele){   
    ele.closest('.form-group').find('input').val($("option:selected", ele).text());
}
$( document ).ready(function() {
    updateValue($('#id_lines-0-item'));   
    updateValue($('#id_lines-1-item'));
    updateValue($('#id_lines-2-item'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
</div>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-1-item" name="lines-0-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
</div>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-1-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />
</div>

Mark Gerryl Mirandilla · Accepted Answer · 2018-04-16 07:40:20Z

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


    <div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>

<div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>

<div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>
    
    <script>
      $(document).ready(function(){

$('select option').click(function(){

$(this).closest('.form-group').find('input').val($(this).text());
});
});
    </script>

Collectives™ on Stack Overflow

Getting the text from dropdown list and Insert it into input text using JQuery?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related